Pixel2Life Forum > css: images not showing

Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design

derek.sullivan

Sep 5 2009, 02:57 PM

for some reason, my menu bg, content bg, and footer bg aren't showing. And I'm not sure why. Attached are my css coding, and my html tell me if you can find out why. http://dsullweb.com to see what im talking about

stylesheet.css

CODE

body {
background: #666666;
margin: 0;
padding: 0;
}
#menu {
background-image: url('images/menubg.gif') no repeat;
width: 775px;
height: 35px;
margin: auto;
}
#border {
background-image: url('images/cntbg.gif') repeat y;
width: 775px;
height: 200px;
margin: auto;
}
#footer {
background-image: url('images/btm.gif') no repeat;
width: 775px;
height: 35px;
margin: auto;
}

index.php

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DSULLWEB</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="menu"> </div>
<div id="border"><?php
$i = 0;
while ($i < 200) {
echo $i++."<br />";
}
?></div>
<div id="footer"> </div>
</body>
</html>

rc69

Sep 5 2009, 03:55 PM

You can't add a position to the background-image property, only the background and background-position properties accept them. So either use 'background' and keep the shorthand, or break the line up into two properties.

derek.sullivan

Sep 5 2009, 04:27 PM

I thought I tried the short hand, but let me try to break it up into seperate properties.

Now, I used the shorthand again, and I got rid of the repeat y and no repeats. and it works! Isn't that weird?

rc69

Sep 5 2009, 10:19 PM

Nope, shorthand only applies to background; background-image != background. Generally speaking (and i mean generally, i'm not 100% on this), any CSS property with a '-' in it will not work correctly using "shorthand notation."

As i write this, i remember background-position being about the only exception to that rule.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.