Question

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.

Answer 1

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;
}