CSSで複数の背景画像を実装する方法
いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。
添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。
自分が試した方法です。
html要素に左右に伸びるグラデーションを指定、body要素に赤丸のオブジェクトを指定。これでトップの背景は実装できました。body要素に追加で青丸のオブジェクトも指定してみましたが、画面を上方向にリサイズすると赤丸のオブジェクトの下に重なってしまします。青丸のオブジェクトは白い背景の部分だけでリピートさせ、画面をリサイズしても赤丸オブジェクトに重ならないようにしたいのですが、この場合どのように実装するのが理想でしょうか。よろしくお願いします。
html {
background: #F3F0E1 url(../img/share/bg_line.jpg) center top repeat-x;
}
body {
background: url(../img/share/bg_t.jpg) center top no-repeat,
url(../img/share/bg_m.jpg) center center repeat-y;
}
#wrapper {
margin:0 auto;
width: 960px;
background-color:#FFFFFF;
}
お礼
遅くなり申し訳ありません。 結局、CSSまるごと変えました。 コメントありがとうございました。