Bert Coules Posted March 19, 2015 Share Posted March 19, 2015 (edited) I ran across a problem with a background image not appearing in a div. I couldn't see anything wrong with the coding at that point (which doesn't mean that there wasn't something wrong, of course) so as an experiment I started stripping away other areas, checking at every stage, to see if there was something elsewhere interfering. It's a technique that I've found useful in the past. Eventually I'd removed almost everything and got down to something extremely basic: style.css: .columns { background: url("images/background.jpg"); border: 1px solid blue; } index.php: <!DOCTYPE html><html lang="en"> <head> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="columns"> <p>THIS</p> <p>WILL</p> <p>BE</p> <p>THE</p> <p>MENU</p> <p>EVENTUALLY</p> </div><!--.columns--> </body><html> And it still doesn't work. The div is displayed with its border and its contents, but not the background image. The directory structure is a main dir with sub-directories css and images. All three files are in the right places. The jpg opens correctly in a picture editor. So why isn't the background being recognised? Clearly I've made some glaringly obvious and very basic error but I've been staring at this for ages now and I'm damned if I can see it. I'd be very grateful for some help. Many thanks. Edited March 19, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2015 Share Posted March 19, 2015 Are those paragraphs floated or have absolute positioning? If that's the case then the problem is that the .columns div has no height. Since that's a menu I would not recommend using a paragraph tag. Those aren't paragraphs, they contain just one or two words. Link to comment Share on other sites More sharing options...
Bert Coules Posted March 19, 2015 Author Share Posted March 19, 2015 (edited) Thanks for the speedy reply. In the pared-down file the paragraphs aren't floated or positioned at all. They're only there to give the div some height, and it works nicely: I see the vertical list of words, bordered by the blue 1px border. I just don't see the background! When that vertical list is eventually replaced by the proper menu I won't be using <p> at all. Edited March 19, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2015 Share Posted March 19, 2015 Make sure the link to the image in your stylesheet is relative to the location of the stylesheet. For example, if the images directory is not inside the css directory then you'll need to move up one directory to get to it: background: url("../images/background.jpg"); Link to comment Share on other sites More sharing options...
Bert Coules Posted March 19, 2015 Author Share Posted March 19, 2015 (edited) I had tried that earlier, but just tried it again. I can see that it's right and that what I posted above was wrong, but it still doesn't bring up the image. I also just tried copying the image into the same directory as index.php and making the style sheet read background: url("background.jpg"); but still no joy. Edited March 19, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2015 Share Posted March 19, 2015 I can't think of much else. If I could see the page I could figure it out. File names are case sensitive, if your file is background.JPG then make sure you use ".JPG" in the stylesheet as well. While you're at that, check whether the file extension is jpg or if it's png or gif. Link to comment Share on other sites More sharing options...
Bert Coules Posted March 19, 2015 Author Share Posted March 19, 2015 The filename is all lowercase, including the extension (which is jpg!). If I upload the files to a directory on my existing site, would you take a look online? I'll do that now. Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2015 Share Posted March 19, 2015 I will look. I can tell you what I'm going to do so you can try yourself when you encounter problems: 1. Open developer tools, in most browsers it's by pressing F12 though you can find it in the menus as well. 2. Check the styles of the columns element. If the background declaration isn't there then the problem is the CSS syntax. 3. If the background declaration is there I'll check to see if the file had a 404. If there was a 404 error then the file name or path were wrong. 4. If both the background declaration is there and the image is loaded then I would check to see other styles that might make the element not visible. Link to comment Share on other sites More sharing options...
Bert Coules Posted March 19, 2015 Author Share Posted March 19, 2015 (edited) The files are in a test directory here: Temp upload now removed. Thanks again. Edited March 19, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2015 Share Posted March 19, 2015 It's a CSS syntax error. I think it probably is because of the space between "url" and "(" Just so you know, you don't need to wrap URLs in quotation marks, but either way is allowed in CSS. Link to comment Share on other sites More sharing options...
Bert Coules Posted March 19, 2015 Author Share Posted March 19, 2015 I'll correct both of those... That did it! I don't know if it was the space before the bracket or the inverted commas, but now it's working perfectly. I'm very grateful. Link to comment Share on other sites More sharing options...
Ingolme Posted March 19, 2015 Share Posted March 19, 2015 It was the space. I've never known quotation marks to be a problem in CSS. Like I said, they're optional, but valid. Link to comment Share on other sites More sharing options...
Bert Coules Posted March 19, 2015 Author Share Posted March 19, 2015 (edited) I've just been trying different combinations of that line and you're quite right: it was the space. I should have seen that ages ago. I really shouldn't be doing this stuff at ten to three in the morning. Funny thing, though: in the coding I cut and pasted from Notepad++ in my first post (and again later) there is no gap. But I'm too tired now to look into why. Thanks again. Edited March 19, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now