Valid CSS, but BG images still don't show up in FF [Archive]

Click to See Complete Forum and Search --> : Valid CSS, but BG images still don't show up in FF

hlfuller

05-18-2008, 04:56 PM

The page:
http://www.craftsburychamberplayers.org/2008/

the style sheet:
http://www.craftsburychamberplayers.org/2008/css/style_2008.css

The excerpt:

body { background-color: #000000;
background-image:url("http://www.craftsburychamberplayers.org/2008/images/cello_bg.jpg");
background-repeat: no-repeat;
background-position: 50% bottom;
color: #FFFFFF;
font-family:"Trebuchet MS",Arial,sans-serif;
font-size:14px;
line-height:150%;
}

W3C's CSS validator validates the CSS at level 2.1,

( See results:
http://jigsaw.w3.org/css-validator/validator?uri=http://www.craftsburychamberplayers.org/2008/ )

but the background image still does not show up in FF (am driving version 2.0). Looks fine in IE 7

ideas?

snakeye

05-18-2008, 10:08 PM

Not showing in Opera neither. Only thing I can think of is perhaps the background-position property being wrong. I have no idea if it is, but it gives me problems many times.

skywalker2208

05-18-2008, 10:12 PM

When I take off the background position it shows up for me.

WebJoel

05-18-2008, 10:14 PM

What with all the "position:absolute;" going on in here, there is essentially nothing on the page for Firefox to 'position' itself from.
Get rid of the "absolute" posiitons and use "relative", and let the document flow naturally.

In the meantime, if you tried this you'll see that the background image IS there, -just that Firefox correctly doesn't know where to place it...

body {background:#000 url("http://www.craftsburychamberplayers.org/2008/images/cello_bg.jpg") no-repeat center 30%;
color: #FFF;
font-family:"Trebuchet MS",Arial,sans-serif;
font-size:14px;
line-height:150%;
} (I shorthand combined your body's background declarations into one line for brevity)

Centauri

05-18-2008, 10:44 PM

As noted, the absolute positioning is causing the problem. As everything is out of the document flow, the body height is collapsing to zero, therefore the background will not show. When a background is applied to the body, it propagates back to the html unless there is a separate background here as well, and setting a 100% height on the html element will allow the background to be displayed.

hlfuller

05-19-2008, 05:48 AM

Thanks all.

I solved it by moving background style declarations out of BODY to a DIV #containsall, positioned absolutely at 0,0 (I prefer the explicitness of controlling with margin and padding). CSS that works (and validates!) is:

body { background:#000000;
color: #FFFFFF;
font-family:"Trebuchet MS",Arial,sans-serif;
font-size:14px;
line-height:150%;
}

#containsall { position:absolute;
left:0px;
top:0px;
background-color: #000000;
background-image:url("http://www.craftsburychamberplayers.org/2008/images/cello_bg.jpg");
margin-left:10px;
margin-top:10px;
padding-left:0px;
width:691px;
height:775px;
border:thin groove #333333;
background-repeat: no-repeat;
background-position: bottom;
}

For newbies (like me!): Don't forget to *use* the new rule...

...<body>
<div id="containsall">

</div>
</body>...