bodyと.wrapに背景画像を設定しました。私の質問は、どのようにそれらの上に背景を置くのですか？それはCSSで行われますが、私はまだそれを把握していませんでした。体の背景画像の上に背景画像を配置するにはどうすればよいですか？
私はありがとうhttp://jsfiddle.net/7sdnU/
にすべての私のコードを配置します。
z-indexで
<body>
<div class="wrap">
</div>
</body>
：あなたが戻って一つの要素を背景レイヤーをシフトすることができるように http://jsfiddle.net/7sdnU/2/
html要素も、スタイルすることができます。このような何か：
html {
background:url(bottom-background.png);
}
body {
background:url(middle-background.png);
}
wrap {
background:url(top-background.png);
}
/* Make sure everything takes up the whole viewport */
html, body, .wrap{
height:100%;
width:100%;
padding:0;
margin:0;
}
デモ：http://jsfiddle.net/7sdnU/15/
あなたはまた、単に別のラッパーのdivを追加することができます。
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
その後、しかし.inner
にCSS3を "トップ" の背景を適用しますmultiple backgroundsが許可されているので、それを見てみたいかもしれません。使用できるなら最適な解決策ですが、完全にはサポートされていません。
テストの後、対角線の背景が折り返しになり、ドキュメント全体ではなくなります。 – JohnQ
OK、何を意味するのでしょうか。 '.wrap'の高さと幅を100％にする必要があります。CSS3を使うことができれば、複数の背景が素晴らしい解決策です。私のインターネットはデモを修正することができないので申し訳ありません... –
デモとポストを試してみてください、私はまだそれがどのように見えるのかはまだ分かりません - イメージはとても小さく微妙です私の悪い結びつきは、デモのためにより良い画像を見つけるのを難しくしています。 –
上記の画像にzindexを試してみてください。 – Unknown