backgroundに画像を複数指定したい!

background

【忘れそうなのでメモ】

普段サイトを開発する際、

背景色を入れるときはbackground-color:#fff;などで背景色を入れたり

背景画像を入れたい場合はbackground-image:url(/img/common/◯◯.png);

のように指定するのですが、同時に複数指定したい場合などあると思います。

その場合の書き方の記録です。

これで複数指定することが出来ます。

注意点なのですが、

・background内の指定した順にレイヤーは上になります。

・上記の理由で、背景色は最後に指定しましょう。画像より先に指定してしまうと、画像の上に背景色が適応されてしまい、画像が見えなくなります。

・background-image:url(/img/common/◯◯.png) no-repeat;のように一括指定は出来ません。

この3つを注意して書いてみてください。

ちなみに3つ以上やりたい場合は、

のように指定してあげることで可能です。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク