CSS background images problem

mwbarker

01-09-2010, 09:56 AM

I am trying to display a top and bottom background image within css. This is my css (basic for a test):

/* basics */
* {margin:0;padding:0;}

/* structure */
body{
margin: 0 auto;
padding: 0px;
text-align:center;
background: #5d4c3a url(img/urbandarker.jpg) no-repeat top center;
}

#bg{
background:url(img/urbandark_btm.jpg) repeat-y bottom center;
}

This the the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<html>
<body>
<div id="bg">
<p>Why is the background at the top when it is listed as "background:url(img/urbandark_btm.jpg) repeat-y bottom center;"</p>
</div>
</body>
</html>

Why is the div "bg" background showing above the body background?

You can see the demo here:
http://dev.upliftingdesign.com/test/

abduraooft

01-09-2010, 10:26 AM

Are you trying to make a sticky foote (http://ryanfait.com/sticky-footer/)r?

mwbarker

01-09-2010, 10:32 AM

No, I'm trying to tile the bottom image so that when content extends beyond the size of the primary background image, it doesn't fall onto the body's brown background.

mwbarker

01-09-2010, 10:55 AM

Ultimately, this is what I am trying to fix:

http://img30.imageshack.us/img30/1294/leesvillefirstmissionsb.png (http://img30.imageshack.us/i/leesvillefirstmissionsb.png/)

Excavator

01-09-2010, 05:09 PM

Hello mwbarker,
#bg image is on top of the body image because that's how the webpage is stacked.

If #bg looks like it's behaving in a way that will fix your problem, try swapping the images around so they are stacked the other way.

If #bg is not going to solve your content overflow, you may want to look into some different images. A top and bottom image with a Y-repeated slice for the middle might work better since it could expand as far as needed for longer content.
You might also try a scrollbar instead of letting the content overflow.

mwbarker

01-10-2010, 02:35 PM

If #bg looks like it's behaving in a way that will fix your problem, try swapping the images around so they are stacked the other way.

I swore I tried that already, but when I swapped the images again, it worked fine. Thanks for the help!