My web site works as desired in Safari and Chrome (not sure about FF), but IE doesn't show the background image for the main page. My index.html code is <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Jeanie and Michael</title> <link href="styles/style.css" rel="stylesheet" type="text/css"> <script src="http://use.edgefonts.net/kaushan-script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>Jeanie and Michael</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="weddingday.html">Wedding Day</a></li> <li><a href="lodging.html">Lodging</a></li> <li><a href="pre-wedding-events.html">Pre wedding events</a></li> </ul> </div> <div id="main_image"></div> <div id="footer"> <ul> <li><a href="jeanie.html">Jeanie</a></li> <li><a href="michael.html">Michael</a></li> <li><a href="jeanie-and-michael.html">Jeanie and Michael</a></li> <li><a href="other-info.html">Other Info</a></li> <li><a href="guestbook.php">Guestbook</a></li> </ul> </div> </body> </html> The relevant css code is #container #main_image { background: url{../images/savethedate.jpg} bottom center no-repeat; background-repeat: no-repeat; background-color: #FFF height: 726px; width: 968px; } I've tried an internet search, but haven't really solved the problem. Thanks in advance for any suggestions.
In css, you have to use different bracket add it like this #container #main_image { background: url('../images/savethedate.jpg') bottom center no-repeat; background-repeat: no-repeat; background-color: #FFF height: 726px; width: 968px; }
try and check if its working inline code <div style="background: url('../images/savethedate.jpg') bottom center no-repeat;"></div>
If I were you, I would write it like this: #main_image { background:#fff url(../images/savethedate.jpg) no-repeat bottom center; height: 726px; width: 968px; }
It looks like you are missing the closing </div> for the container. IE might be getting thrown off because of that...???
If I add an extra </div>, I lose formatting of #container #main_image. Check out http://www.jeanieandmichael.com/index-copy.html for the result.
Try moving that closing </div> after <div id="main_image"></div>. The reason is that your CSS is basically saying "look for the element with an ID of "main_image" that is inside an element with the id of "container".
1) ID's are always unique, there is no reason to EVER say #container #main_image 2) Dimes to dollars that #header div isn't doing anything useful given the presence of TWO perfectly good block level containers inside it. 3) uptree linking (../) is an indication of sloppy/half assed directory structure. Put the image down-path of the CSS not the other way around. 4) It's sloppy, even in testing, to not include a MEDIA attribute. 5) This looks like a MASSIVE image, are you sure this is just presentation and not content? 6) CLOSE ALL YOUR ELEMENTS -- if closing everything you are opening is screwing up your layout, there's something wrong with what you are doing. 7) As I tell EVERYONE I possibly can, lose the HTML 5 Bull. 8) LINK us to a live copy or the COMPLETE CSS, incomplete snippets will NEVER let us diagnose your problem properly. Without the image in question, the FULL CSS for the page -- we can't help you. 9) even if it's to show an image, fixing the height of an element like a DIV usually indicates broken methodology in building a website in the first place!
So, I think your problem is even weirder than you might think. Your image was saved in CMYK mode. Sometimes CMYK images won't show up. I re-saved the image for you in RGB mode and put it here for you to download: http://stephaniekendall.com/contests/savethedate.jpg Also, I cleaned up your code just a bit. I added some comments and removed the absolute positioning. I don't think you need any of the absolute positioning and I think it will actually cause more problems if you do use it. HTML: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Jeanie and Michael</title> <link href="styles/style.css" rel="stylesheet" type="text/css"> <script src="http://use.edgefonts.net/kaushan-script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>Jeanie and Michael</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="weddingday.html">Wedding Day</a></li> <li><a href="lodging.html">Lodging</a></li> <li><a href="pre-wedding-events.html">Pre wedding events</a></li> </ul> </div><!-- end #header --> <div id="main_image"> </div><!-- end #main_image --> <div id="footer"> <ul> <li><a href="jeanie.html">Jeanie</a></li> <li><a href="michael.html">Michael</a></li> <li><a href="jeanie-and-michael.html">Jeanie and Michael</a></li> <li><a href="other-info.html">Other Info</a></li> <li><a href="guestbook.php">Guestbook</a></li> </ul> </div><!-- end #footer --> </div><!-- end #container --> </body> </html> Code (markup): CSS: #container { width: 968px; background: #FFF; margin: 0 auto; padding-left: 10px; padding-right: 10px; } #main_image { background: #fff url('../images/savethedate.jpg') no-repeat; height: 726px; width: 968px; } h1 { font-family: kaushan-script, serif; font-size: 60px; margin: 0; float: left; } #header { color: #FF3; background-color: #0CF; } #header ul { clear:left; margin: 0px; padding: 0px; list-style-type: none; overflow:hidden; } #header a { font-size: 28px; font-weight: bold; font-variant: small-caps; color: #FFF; text-decoration: none; text-align: center; display: block; width: 242px; } #header ul li { float: left; } #lodging { font-size: 18px; background-color: #FFFACD; } p { margin:0 } #footer { color: #FF3; background-color: #0CF; } #footer a { font-size: 22px; font-weight: bold; font-variant: small-caps; color: #FFF; text-decoration: none; text-align: center; display: block; width: 193px; } #footer ul { margin: 0px; padding: 0px; list-style-type: none; overflow:hidden; } #footer ul li { float: left; } Code (markup):
Thanks for the help, angele803! I tested your solution and it worked great in Explorer. I'll take it live later this afternoon.
I admit I am a newbie. I followed a tutorial from Dreamweaver and made some mistakes along the way. Your reasoning and approach make sense and I suppose that I should try to emulate that methodology. I don't anticipate making too many more web sites, though.
You are welcome gorphus. Glad I could help! You did really well for a newbie. Just needed a few tweaks.