[解決済み】CSSで複数の背景画像を表示させることはできますか？

2022-03-27 17:15:27

質問

背景画像を2枚にすることは可能ですか？例えば、1つの画像はトップで繰り返し（repeat-x）、もう1つはページ全体で繰り返し（repeat）、ページ全体の画像はトップで繰り返される画像の後ろにあるようにしたいのですが、可能ですか？

htmlとbodyの背景を設定することで、2つの背景画像に対して希望の効果を得られることがわかりました。

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

これは良いCSSでしょうか？もっといい方法はないのでしょうか？また、3つ以上の背景画像が必要な場合はどうすればよいのでしょうか？

CSS3ではこのようなことが可能で、以下のような感じです。

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

現在の主要なブラウザのバージョンでサポートされるようになりましたしかし、IE8以下に対応する必要がある場合、それを回避する最良の方法は、余分なdivを持つことです。

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}