CSS画像の問題

Question

背景に3つの画像を配置するのに苦労しています。つまり、実際には1つの画像が2000x550ピクセルの場合、200ピクセル（垂直）のままで別の画像を配置する必要がありますそれはすべてのセンターとそれらの1つのイメージをフッタにもカバーします。

フルイメージを場所にする方が良いと思いますか？それは約30キロバイトです。または、CSSを使用して配置する方法はありますか？

種類よろしく

Answer 1

これをCSS Z-Indexで実現できるはずです。詳細については、以下のリンクを参照してください：

のzインデックスのW3C学校説明： http://www.w3schools.com/Css/pr_pos_z-index.asp

スマッシングマガジンからZインデックスのののIndepth説明： http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 2

最良の方法は、指定された高さでdivを定義するだろう、ヘッダー画像を配置する方法についての質問に答えるために（550px背の高いヘッダは私にひどく大型ようだが、ちょっと、その（おそらく100％に設定されています）、background-image CSSプロパティを使用して画像を配置します。これにより、サイドスクロールが防止されます。

Answer 3

あなたが行くているもののサンプルサンプル画像と一緒に行くのはいいだろう。あなたの説明から、あなたはz-indexを適切に実装していないように思えます。私の推測では、Zインデックスを追加するdivの位置を宣言する必要があるということです。 position：relativeであっても、それを宣言しなければならないか、z-indexが機能しません。

- 本当の答えを編集 -

あなたの画像を見た後にこれは難しいが実装していること、実際にはありません。ここで私はそれを行うだろうかある -

白とピンク/グリーン/グレーの背景にBODYの背景に設定し

1. ：

   体{背景：URL（画像/緑、ピンク、gray_bg.pngを）非反復#FFF;}

2. はグレー画像にDIVの背景を設定 -

   DIV＃1グレー{背景：なしリピート#FFF URL（画像/ gray_bg.png）;}

   を

灰色の背景のdivが既にページのBODYの「上」にあるため、Z-インデックスを設定する必要はありません。透明な背景を持つPNG画像を使用すると、背景画像のいずれかで覆われていない場所に白い背景が表示されます。