他の背景画像がある場合、リピートを伴う背景画像は停止する必要があります

Question

私のウェブサイトのコンテンツ部門には、あらゆる種類のレイヤースタイルの独特の背景があります。 HTML/CSSでは、私はちょうどPhotoshopから背景を取り、それを背景画像として使うことができます。 私の問題は、コンテンツdivの高さが可変であるということです。これを解決するために、上のピクセルをとり、中央に1ピクセルの行を配置し、repeat-yと下のピクセルを配置し、それらを下に配置します。これは機能しますが、中間の背景画像は、先頭の背景画像の後ろ、および、背景画像の前に開始する必要があります。

div#content{ 
    background: url('contentbghead.png') top center no-repeat, 
       url('contentbgfoot.png') bottom center no-repeat, 
       url('contentbgmid.png') 0px 10px repeat-y; 
    width:680px; 
    height:300px; 
} 

私の結果は、ここで見つけることができます：http://tinypic.com?ref=30muazs

Answer 1

複数の背景は、CSS2ではサポートされていません。あなたは、あなたが探しているものを達成するために複数のdivが必要になります。あなたはまたに複数の背景のためのいくつかのCSS3のメソッドを見てみることができます

：

方法

Multiple Backgrounds with CSS3

、しかし、IE9よりも古いIEのバージョンでは動作しません。

Answer 2

これは、各背景エントリが別の背景と関係がないため、複数の背景では不可能です。ただし、擬似要素を使用してこの効果を実現できます。

div#content{ 
    position:relative; 
    background: url('contentbghead.png') top center no-repeat, 
       url('contentbgfoot.png') bottom center no-repeat; 
    width:680px; 
    height:300px; 
} 
div#content:before { 
    content:"\0020"; font-size:0px; 
    display:block; position:absolute; top:10px; left:0px; bottom:10px; 
    width: /* Whatever your BG's width is */; 
    background:transparent url('contentbgmid.png') repeat-y left top; 
    pointer-events:none; 
} 

それが可能だとしてあなたはそれがブラウザのために（あなたのコンテンツの上に重ねています場合、擬似要素は、クリックイベントをキャプチャする可能性がある、Zインデックスレイヤリングの予防策を取るしたいと思いますポインタイベントをサポートしていない）。

Answer 3

こんにちは、あなたが使用して結果を得ることができ：と前：CSSの擬似要素後。

私は1つのdivでコードを作成し、その1つのdivとmid画像ですべての3つの画像を使用しました。y軸で繰り返すことができます。

注：と前： * 擬似要素後*サポートまでIE-8

HTML

<div id="content"> 
Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content 
</div> 

CSS

#content:after { 
    background: url("http://i.imgur.com/5agws.png") no-repeat 0 0; 
    content: " "; 
    height: 50px; 
    left: 0; 
    position: absolute; 
    width: 680px; 
} 

#content:before { 
    background: url("http://i.imgur.com/P7jL5.png") no-repeat 0 0; 
    content: " "; 
    height: 50px; 
    position: absolute; 
    top: -50px; 
    width: 680px; 
} 

#content { 
    background: url("http://i.imgur.com/vAqRU.png") repeat-y 0 0; 
    color: white; 
    position: relative; 
    top: 50px; 
    width: 680px; 
    white-space: pre-wrap; 

} 

はより良く理解するためのデモを参照してください - http://jsfiddle.net/5Lkmr/40/