Question

I am tying to stack divs to show a top and bottom fade using and image.

The outer div (“rotator”) has a background image that has a gradient at the top and bottom and transparent in the middle. In the middle I want to show content or an image and have the outer div background image on top so you always will see the gradients on top and bottom and the content/image behind.

Thanks for any help. Right now the background image always gets covered by the inner div content/image.

Here is my code:

<div id="rotator">
<div class="content">this is my content</div>
</div>

#rotator 
{
    width:990px;
    height:300px;
    background: url('../Images/TIBC_Base/featured_area.png') repeat-x;
z-index:99;

}
#rotator .content
{
    width:990px;
    height:300px;
z-index:-1;
}

Answer 1

I have added new .image-frame div inside the #rotator with following styles for bring shadow on .content. and check the updated code.

#rotator 
{
    width:990px;
    height:300px;
    position:relative;
}
.image-frame{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: url('http://i47.tinypic.com/2lctevc.png') repeat-x;
}