Problems with using images as element backgrounds

KevinM1 · 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?

KevinM1 · June 22, 2010

Figured it out and simplified my image replacement code.

Sign In

Problems with using images as element backgrounds

Recommended Posts

KevinM1

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information