KevinM1 Posted June 22, 2010 Share Posted June 22, 2010 For some reason, none of the images I've set as element backgrounds are displaying. It's not a permissions issue as images that I use with normal <img> tags are working fine. It has to be a CSS issue, but I'm not seeing it. HTML: <!doctype html> <html lang="en-us"> <head> <meta charset="UTF-8" /> <title>Major Productions</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/mp.css" /> </head> <body> <div id="site"> <div id="header"> <div id="nav"> <ul> <li id="home"><a href="#" title="Home">Home</a></li> <li id="about"><a href="about.html" title="About">About</a></li> <li id="portfolio"><a href="portfolio.html" title="Portfolio">Portfolio</a></li> <li id="contact"><a href="contact.html" title="Contact">Contact</a></li> </ul> </div> </div> <div id="content"> Major Productions blah blah blah </div> <div id="footer"> © Major Productions LLC </div> </div> </body> </html> mp.css: #site { width: 960px; margin: 0 auto; } #header { position: relative; width: 960px; height: 105px; background: url(images/Header.jpg) no-repeat; } #nav ul { position: absolute; top: 0px; left: 250px; overflow: hidden;} #nav ul li { display: inline; float: left; } #nav ul li a { display: block; height: 100px; } #home a { padding: 100px 0 0 0; width: 81px; height: 0px !important; height /**/: 100px; background: url(images/Home.jpg); overflow: hidden; } #home a:hover { background: url(images/Home.jpg) 0 -100px; } #about a { padding: 100px 0 0 0; width: 81px; height: 0px !important; height /**/: 100px; background: url(images/About.jpg); overflow: hidden; } #about a:hover { background: url(images/About.jpg) 0 -100px; } #portfolio a { padding: 100px 0 0 0; width: 101px; height: 0px !important; height /**/: 100px; background: url(images/Portfolio.jpg); overflow: hidden; } #portfolio a:hover { background: url(images/Portfolio.jpg) 0 -100px; } #contact a { padding: 100px 0 0 0; width: 96px; height: 0px !important; height /**/: 100px; background: url(images/Contact.jpg); overflow: hidden; } #contact a:hover { background: url(images/Contact.jpg) 0 -100px; } Again, only the images that are set with the background CSS property are affected. Removing the CSS reset file I'm using doesn't fix the issue. Any ideas? Quote Link to comment https://forums.phpfreaks.com/topic/205569-problems-with-using-images-as-element-backgrounds/ Share on other sites More sharing options...
KevinM1 Posted June 22, 2010 Author Share Posted June 22, 2010 Figured it out and simplified my image replacement code. Quote Link to comment https://forums.phpfreaks.com/topic/205569-problems-with-using-images-as-element-backgrounds/#findComment-1075701 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.