【CSS】backgroundで背景画像を複数使うテクニック

CSS

【CSS】backgroundで背景画像を複数使うテクニック

2019年08月10日 8:00 

【CSS】backgroundで背景画像を複数使うテクニック

こんにちは!社員Aです👩

久しぶりの投稿になってしまいましたが、また続けてお届けできるようにがんばります!

さて、今回はCSSのbackgroundプロパティで複数の背景画像を使う方法についてご紹介します。

 



 

一つの要素に複数個の背景画像をつけたい

コーディングしていると意外と遭遇するのですが、一つの要素に複数個の背景画像を入れたいときがあります。

例えば左右に別々の背景画像をつけたり、重ねたり…など。

そんなときにわざわざ囲む要素を増やさなくても、backgroundプロパティで対応できます。

 

HTML

 

CSS

 

このように、background-image:でカンマ区切りで複数個画像を指定すると、指定した分だけ背景を設定できます。

このとき注意したいのが、backround-imageで複数個設定した場合は、background-repeatやbackground-positionなども同じ個数分設定が必要です。

 



背景画像を複数個と、背景色もつけたい場合

たまに、背景画像を複数個設置した上で背景色も同時につけたいという場合もあります。

この場合は、background-imageで複数個の背景を指定しながら、さらにbackground-colorで色を指定するだけで対応できます。

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!