CSS: Element behind all sibling elements within a parent element
I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:
<div id='container'>
<div开发者_运维知识库>Blah</div>
<input type='text'/>
<input type='submit'/>
<div id='background'>
<img.../>
Some Text Maybe?
</div>
</div>
My failed CSS:
#background{
float:left;
z-index:-999;
background-color:black;
height:'+o.height+'px;
width:'+o.width+'px;
}
The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.
Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.
What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.
Try putting the background as the container's first child, then using position: absolute;
. Mess around with the z-index
until it works.
Also, you may need to specify a "more negative" z-index on the <body>
, otherwise your background element will end up behind the body (and thus invisible).
精彩评论