複数の背景画像をCSSで設置する

はじめに

こんな相談を受けました

• canvasの背景に設置した画像が重すぎて困っている.
• バックエンド側で軽量化したり画像形式を変えてみたが一長一短.
• 分割したらどうかとおもうが、可能？

background background-***は複数設定出来たと思ったのですが、うろ覚えだったので備忘をかねて投稿します。

実装

基本的には,区切りで複数設定できます。
最後に;を忘れずに。

css

background-image: url("http://placehold.jp/56c7c7/ffffff/200x100.png?text=1"), 
url("http://placehold.jp/22a31d/ffffff/200x100.png?text=2"), 
url("http://placehold.jp/75b4d9/ffffff/200x100.png?text=3"); 

画像は重なるように表示されます。
その際、一番最初に指定した設定（画像path）が一番上（手前）に表示されます。

画像のサイズ（縦/横）によっては、画像が重なって見えない場合があるので、
必要に応じてbackground-positionを設定すると良いかと思います。

css

background-position: left 0px top 0px,
left 0px top 100px,
left 0px top 200px;

表示されない時のチェック事項

• 記述や画像のpathは正しい？
• カンマある？
• 画像が重なっていない？
• 繰り返しとかされていない？

＊１度、設定した画像を1つにしてみるとわかりやすいです。

実装例

See the Pen Multiple_background_settings by H.N (@H_Naito) on CodePen.

この例の実装ポイント

• こちらの実装ではJavaScriptで出力してます。
• 背景画像の共通設定はbackgroundプロパティで設定し、個別の設定をbackground-***で部分的に上書きしています。

参考

background-image
https://developer.mozilla.org/ja/docs/Web/CSS/background-image