CSS

2021.05.14

【CSS】backgroundで行う背景画像の複数指定

今回は、背景画像を複数指定したい場合の方法について解説します!

指定方法

早速ですが、指定方法です。

backgroundの各プロパティに 「,(カンマ)」で区切って複数の値を書くことで、複数の背景画像を表示することができます。
それぞれのプロパティで指定した順番に適用されますので、1つ目に指定した画像に効かせたいものは1つ目に、2つ目に指定した画像に効かせたいものは2つ目に記述していきます。

See the Pen background by spiqa design (@spiqa_design) on CodePen.

上記の例では、プロパティごとに分けて書いていますが、backgroundの一括指定でも同じように表示することができます。

See the Pen background by spiqa design (@spiqa_design) on CodePen.

画像を重ねる場合

画像を重ねて表示したい場合、重なり順に気をつける必要があります。
1つ目に指定した画像が1番上に、2つ目に指定した画像が2番目に、という順番で画像は配置されていきます。

See the Pen PopNmdK by spiqa design (@spiqa_design) on CodePen.

こちらの例では、1つ目の画像としてロゴの画像を、2つ目の画像としてグリーンの画像を指定しています。

試しに指定の順番を逆に変えてみると、ロゴの画像がグリーンの画像のしたいに配置されてしまい、見えなくなってしまいました。

See the Pen YzZqVRp by spiqa design (@spiqa_design) on CodePen.

背景色を指定する場合

複数の画像を表示した上で、背景色を指定したい場合、必ず最後に指定します。最後に指定しない場合、背景色が表示されませんので、気をつけてください。

See the Pen background by spiqa design (@spiqa_design) on CodePen.

まとめ

今回は、背景画像を複数指定する場合について解説いたしました。
指定方法を正しく用いて、さまざまなデザインを表現していきたいですね。

こちらの記事もおすすめ

関連記事

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

おすすめ記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!