CSS3で背景画像を複数指定

作成日 2020.12.03
更新日 2020.12.10
CSS
CSS3

CSS3で、1つのボックスに背景画像を複数指定する簡単なサンプルコードを記述してます。

1. 環境
2. 背景画像複数指定
3. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

背景画像複数指定

カンマで区切って背景画像を指定するだけで1つのボックスに対して複数指定が可能です。


/*2つの背景画像を指定*/
.main {
	background-image: url(images/bg1.jpg),url(images/bg2.jpg);
	background-position: 0 0,right bottom;
	background-repeat: no-repeat,no-repeat;
}

3つ以上の画像を指定することも可能です。
また次のようにまとめて記述することも可能です。

/*3つの背景画像をまとめて指定*/
.main {
	background: url(images/bg1.jpg) 0 0 no-repeat,url(images/bg2.jpg) 33% 0 no-repeat,url(images/bg3.jpg) 66% 0 no-repeat;
}

サンプルコード

以下は実際に、背景に3つの画像を指定したサンプルコードとなります。

<style>
    /*3つの背景画像を指定*/
    
    .main {
        width:100%;
        height:150px;
        background-image: url(images/bg1.jpg),url(images/bg2.jpg),url(images/bg3.jpg);
        background-position: 0 0,center 0,right 0;
        background-repeat: no-repeat,no-repeat,no-repeat;
        background-size: 33.3% auto,33.3% auto,33.3% auto;
    }
    .main p {
        font-weight: bold;
        color: #333;
        text-align: center;
        background: rgb(255 255 255 / 0.5);
    }
</style>

<div class="main">
    <p>
    1つのボックスに3つの背景画像を指定しています。
    </p>
</div>

ブラウザ上で表示した結果

1つのボックスに3つの背景画像を指定しています。