Jump to content

Background Image Issues. Help?


moriahcgibbs

Recommended Posts

ok, so i designed this template for a website that i want to start but for some reason i cant get any background images to show up anywhere. I dont know whats wrong. I validated the css, and Html and it just isnt working. Ive tryed different browsers, and different ways of styling. Im obviosly missing something. Any help would be greatly appriciated. here is the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Home</title> <style type="text/css">body{background:#3D1400;}/******modual positioning******/#container{width:48em;height:41em;margin-right:auto;margin-left:auto;margin-top:auto;margin-bottom:0em;padding:1em;padding-top:0em;background:#00BFBF;}#headding{background:purple url('css_image\bg.png') repeat-x;width:48em;height:4em;padding:1em;margin-bottom:3.5em;margin-left:-1em;}img.bd{position:relative;width:50em;height:0.5em;left:-1em;top:-0.5em;}nav{margin-top:-1em;margin-left:0em;margin-bottom:3em;width:48em;height:1.5em;background:#ffffff;padding-left:0em;border-radius:0.2em;}/*side bar*/#side_left{width:10em;height:29em;float:left;background:#4CD2D2;}#contests, #featured_blog, #featured_discussion, #featured_poll{width:10em;margin:0.8em;color:#0D1A8C;font-weight:900;font-size:0.8em;background:#79DDDD;padding:0.5em;}hr.side{border:0.1em solid #0D1A8C;width:10em;}/*side bar end*/div#featured_photo{float:left;margin-left:1em;width:20em;height:20em;background:#000000;overflow:hidden;border-radius:1em;}div#top_rated_photos{float:right;width:16em;height:20em;background:#111111;}footer{position:relative;height:4em;width:58.6em;margin-right:auto;margin-left:auto;background:#000000;text-align:center;padding:2em;font-size:0.8em;}a.f{color:#ffffff;text-decoration:none;border-right:.1em solid #ffffff;padding-right:1em;margin-right:0.3em;padding-left:0.3em;margin-left:0.3em;}/**********Photo Gallery**********/a.tr_img img.top_r{height:3.9em;width:3.9em;float:left;border:0.1em solid #000000;}a.tr_img img.top_r:hover{margin:0em;border:.1em solid #ff0000;}/******text styles******/h1{font-size:2em;text-transform:capitalize;border-bottom:0.2em solid #8C8CE8;color:#8C8CE8;}span#fp{color:#999999;float:right;margin-right:1em;font-weight:bold;display:block;}/***************************************NAVIGATION BAR***************************//*top level styles*/ul.top_link li{float:left;background:#ffffff;position:relative;display:inline;border-right:0.1em solid #00BFBF;border-left:0.1em solid #00BFBF;}ul.top_link a{display:block;position:relative;font-size:1.3em;color:#000000;text-decoration:none;padding-left:1em;padding-right:1em;}/* style the top level hover incase images fail *//* dropdown ul styles */ul.top_link li.sub_link a{padding-right:0.5em;padding-left:0.5em;width:8em;}ul.top_link >li:hover{background:#000080;}ul.top_link >li>a:hover{color:#ffffff;}ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active{background:#000080;color:#ffffff;}/********* dropdown sytles *********/ul.top_link li ul{position:absolute;top:2em;left:0;z-index:1;visibility:hidden;}ul.top_link li > ul{top:auto;left:auto;}ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul{visibility:visible;}ul.top_link ul li{border:none;height:auto;float:left;width:8em;top:0.15em;left:-2.6em;padding:0em;text-align:left;background:#ffffff;}ul.top_link ul li a{float:left;font-size:0.8em;text-decoration:none;display:block;height:2em;line-height:2em;text-align:left;}/************************** ~DROPDOWN STYLES~ *************************/.top_link li.sub_link ul{background:#ffffff;padding-left:0em;}.top_link li.sub_link ul li a{width:8em;}.top_link li.sub_link ul li a:hover{background:#000080;color:#6385A6;} </style></head><body> <div id="container"> <div id="headding"> <h1>Welcome to purple panda bear ♥</h1><img src="css\css_image\border.gif" class="bd" alt="border" /><img src="css\css_image\border.gif" class="bd" alt="border" /><img src="css\css_image\border.gif" class="bd" alt="border" /></div> <nav> <ul class="top_link"> <li class="top_link"> <a href="index">home</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li><li class="top_link"> <a href="index">blog</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li><li class="top_link"> <a href="index">forum</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li><li class="top_link"> <a href="index">forum</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li><li class="top_link"> <a href="index">gallery</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li><li class="top_link"> <a href="index">anime</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li><li class="top_link"> <a href="index">login</a><ul> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li> <li class="sub_link"> <a href="">sub link</a></li></ul></li></ul></nav> <div id="side_left"> <div id="contests"> Featured Contests<hr class="side" /><a href="">Bunnys vs. Pandas</a><a href="">Dianoaurs vs. Elefants</a><a href="">Pickles vs. Ice Cream</a> </div> <div id="featured_blog"> Featured Blogs <hr class="side" /> <a href="">blog 1</a> by,user 1<br /> <a href="">blog 2</a> by,user 2<br /> <a href="">blog 3</a> by,user 3<br /> </div> <div id="featured_discussion"> Featured Forums<hr class="side" /><a href="">Anime discussion</a><a href="">Panda discussion</a><a href="">Epicness </a> </div> <div id="featured_poll"> Featured Poll <hr class="side" /> What is your favorate fuzy animal?<br /> <input type="radio" value="bunnys" />Bunnies<br /><input type="radio" value="pandas" />Pandas<br /><input type="radio" value="kittys" />Kittys</div></div> <div id="featured_photo"> <a href=""> <img id="featured" src="image/featured/arura.jpg" alt="featured phpto" title="epiic"/></a><span id="fp">featured photo</span></div> <div id="top_rated_photos"> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/rose.jpg" alt="top rated photo" title="rose"/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime1.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime2.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime3.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime4.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime5.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime6.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime7.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime8.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime9.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime10.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime12.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime13.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime14.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime15.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime16.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime17.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime18.jpg" alt="top rated photo" title=""/></a><a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime19.jpg" alt="top rated photo" title=""/></a> <a href="" class="tr_img"> <img class="top_r" src="image/top_rated/anime11.jpg" alt="top rated photo" title=""/></a></div></div> <footer> <a href="" class="f">footer link</a><a href="" class="f">footer link</a><a href="" class="f">footer link</a><a href="" class="f">footer link</a><a href="" class="f">footer link</a><a href="" class="f">footer link</a></footer> </body></html>

Link to comment
Share on other sites

Try switching the backward slash from this: background:purple url('css_image\bg.png') repeat-x; To a forward slash:

background:purple url('css_image/bg.png') repeat-x;

Also make sure your path to the image is correct.You might want to do the same for these too:

<img src="css\css_image\border.gif" class="bd" alt="border" /><img src="css\css_image\border.gif" class="bd" alt="border" /><img src="css\css_image\border.gif" class="bd" alt="border" />

Link to comment
Share on other sites

I don't think that's necessary(meaning to start over and re-make it). I took your code and used my own images and they all show up. It most likely has to do with the path to the image for the img src and background uri. Keep at it if I were you,

Link to comment
Share on other sites

Don't restart that would be a big mistake, seeing how you already have the codes, just adjust, don't delete.Like mentioned about make sure that your paths are correct. I see that you have your images running through a CSS folder. Make a different folder and name it IMG or Image. Then make sure that the actually name of the photo is correct.Lastly, make sure the extension type is correct (ex: .JPEG .png) Good luck to ya! Cheers!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...