CSS3複数の背景を1回だけ繰り返し使用する

Question

私はCSS3の複数の背景を使用しようとしています：上のセクション（繰り返されない）、中セクション（コンテナを「拡張可能」にするために繰り返す1ピクセルスライス） （繰り返されない）。私が抱えている問題は、中央のセクションが繰り返され、上部と下部のセクションの両方をカバーすることです。 IE9、FF6、Chromeでも同じ結果になります。ここに私のコードです：

#container { 
    margin: 0 auto; 
    width:1093px; 
    background-image: url('WC-Background-Top.jpg'), url('WC-Background-1px.jpg'), url('WC-Background-Bottom.jpg'); 
    background-position: top, middle, bottom; 
    background-repeat: no-repeat, repeat-y, no-repeat; 
} 

Answer 1

除算ページアップ<div>タグを使用して、各<div>の背景画像のプロパティに関連するイメージを適用します。このようにして、background-repeatに異なるプロパティ値を指定することができます。

Answer 2

別々の背景を持つ3つの別々のdivを作成することができます。

#topContainer{background: url('WC-Background-Top.png') no-repeat; } 
#midContainer{background: url('WC-Background-1px.png') repeat-y; } 
#bottomContainer{background: url('WC-Background-Bottom.png') repeat-y; } 

これは、あなたが望むことを行う最も有効な方法だと思います。

あなたが言及した他のスタイルに加えてください。これらを他の要素の流れの外側にしたい場合は、それらを与えることを考えてくださいposition:absolute。