Changing background order

HTML & CSS
1

I have two overlapping divs, one’s a smaller square. I want the background of the smaller, lower one to be behind the background of the first one… but I’m not sure if it’s possible, though I don’t see why not.

<body>
<div id="container">
<div id="header"></div>
<div id ="content"><p>I am full of content</p></div>
</div>
</body>

#container {
margin: 0 auto; 
width:1060px;
background: url(layout/header.jpg) center top no-repeat; 
height: 100&#37;; 
position:relative; 
z-index: 10;}

#content {
background: url(layout/stripes.gif) center top repeat; 
width: 808px; 
min-height: 600px; 
margin: 0px auto; 
position: relative; 
z-index: -10;}

with the z-index that way I’d expect the container background on top of the content background, but that doesn’t seem to be the case. Is it because container is content’s parent?

2

Maybe the container div and the way you have used position is the problem.

This demo uses z-index to put the the “bg1” (green div) on top of the “bg2” (red div)

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
#container {
position: relative}
 
#bg1 {
position: absolute; top: 0px; left: 0px;
background-color: green;
width:500px;
height: 500px; 
z-index: 10} 
 
#bg2 {
position: absolute; top: 0px; left: 0px;
background-color: red;
width:500px;
height: 500px; 
z-index: 5}
 
</style>
</head>
<body>
<div id="container">
 <div id="bg1"></div>
    <div id="bg2"></div>
</div>
</body>
</html>
3

I’m puzzled by what you’re trying to achieve. Your “content” div is contained within your “container” div. You’ve set the “content” div to be behind the “container” div, so unless the background image on the container has transparency, nothing from the “content” should show through. Do you want to post the URL and we’ll see what’s happening?

Off Topic:

As a general rule of thumb, any time you’re setting a background image, you should also look at setting a background colour, that is as broadly similar to the image as possible, for those occasions when the image doesn’t load, or at least is slow to load.

4

Hi,

The Content div will go behind the #container background if you simply remove the position:relative from #container and therefore lose the current stacking context. Otherwise you can’t place a positioned child’s background behind its positioned parent’s background.

However as Stevie D said above that will make the element invisible because it will be underneath the parent unless the parent is transparent. We may need to see an example of what you are trying to do to give better advice:)