Container with 3 backgrounds, absolute div 100% height of its parent

开发者_运维百科Basically I want to make container with 3 semi-transparent image backgrounds, so I can put content over all of them. Concept is

Background #1 static size

Background #2 resizable size

Background #3 static size

And I want to be able to put content over all this 3 backgrounds to get such an effect.

I was thinking about something like this:

<div style="position: absolute; height: auto;">
    <div style="background: url('images/container.png') repeat-y; height: 100%; width: 990px; position: absolute; top: 10px;"></div>
    <div style="background: url('images/containerTop.png') no-repeat; height: 10px; width: 990px; position: absolute;"></div>
    <div style="background: url('images/containerBottom.png') no-repeat; height: 11px; width: 990px; position: absolute; bottom: -21px;"></div>
    text<br />
    text<br />
    text<br />
    text<br />
</div>

In effect, block are sized ok, but I don't have idea how to put text over 3 blocks, and make size still ok.

You can use a "float-under" approach...

See it in action at jsFiddle.

HTML:

<div class="threeLayerContainer">
    <div class="payloadText">
        Blah-dity, blabbity, blab...
    </div>
    <div class="bgTop"></div>
    <div class="bgMiddle"></div>
    <div class="bgBottom"></div>
</div>

CSS:

.threeLayerContainer {
    position:       absolute;
    height:         auto;
}
.bgTop {
    background:     red url('images/containerTop.png') no-repeat;
    height:         10px;
    width:          990px;
    position:       absolute;
    top:            0;
    z-index:        -10;
}
.bgMiddle {
    background:     powderBlue url('images/container.png') repeat-y;
    height:         100%;
    width:          990px;
    position:       absolute;
    top:            0;
    z-index:        -15;
}
.bgBottom {
    background:     yellow url('images/containerBottom.png') no-repeat;
    height:         11px;
    width:          990px;
    position:       absolute;
    bottom:         0;
    z-index:        -10;
}
.payloadText {
    width:          990px;
}

Just put the text inside the divs with the background images. if you don't want your content to grow the size of the div, you should look at using css, specifically 'overflow'

you don't need to use position:absolute elements. You can do this:

<div class='container1'>
    <div class='container2'>
        <div class='container3'>
            ...
        </div>
    </div>
</div>

and in your css:

.container1 {background:url(bottombg) repeat-x bottom left;}
.container2 {background:url(topbg) repeat-x top left;}
.container3 {color:red;}

see it in action here: http://jsfiddle.net/yfLSK/1/