3つの背景を持つコンテナ、絶対div高さ100％親の高さ

Question

基本的に3つの半透明の背景を持つコンテナを作成したいので、すべてのコンテナにコンテンツを配置できます。コンセプトは

背景＃1静的サイズ

背景＃2サイズ変更可能なサイズ

背景＃3静的サイズ

であると私はsuch an effectを取得するには、すべてこの3つの背景の上にコンテンツを置くことができるようにしたいです。

私はこのような何かを考えていた

：効果で

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

、ブロックがOKなサイズであるが、私は3つのブロックの上にテキストを配置する方法のアイデアを持っており、サイズはまだ大丈夫しないでください。

Answer 1

あなたが "フロートアンダー" のアプローチを使用することができます...

あなたはこれを行うことができます

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

Answer 2

div内にテキストを背景画像とともに置くだけです。あなたのコンテンツがdivのサイズを大きくしないようにするには、CSSを使って、特に 'オーバーフロー'を見てください。

Answer 3

あなたは絶対的な要素を使用する必要はありません。

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

とあなたのCSSの：

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

がここにアクションでそれを参照してください。http://jsfiddle.net/yfLSK/1/