CSS3入門道場

背景画像

CSS3では背景画像関係が強化されて、複数の背景画像を指定できるようになりました。また、背景画像を要素に全体表示することなども簡単にできるようになりました。これからは複雑なHTMLやJSなどに頼らなくても簡単にこれらが実現できることになります。

メニュー

参考リンク

ブラウザサポート

本章で紹介する背景画像のプロパティは、基本的にはどのブラウザでもサポートしています。但し、background-attachment、background-positionのモバイル系については、下記のリンクを参照して下さい。

参照:Can I use
Background-image options
background-attachment
background-position

複数背景画像

CSS3で、ついに複数背景画像を設定できるようになりました。半角カンマで区切って複数の背景画像を指定します。まずはサンプルです。

実際のサンプル

background-imageで、半角カンマ区切りで2つの背景画像を設定しています。1つはキャラクタ画像で、1つは緑の背景です。見やすさ向上の為、行を分けて書いています。

それに続くbackground-repeat、background-position もご確認下さい。こちらも複数分の指定ができますが、no-repeatは1つだけしか指定していません。このように画像分に満たない時は、その指定が繰り返されることになります。ですので2つの画像共にno-repeatが適用されます。ここでもし画像が4つあったとした場合、background-positionは、「bottom center」「left top」が2回繰り返されますので、1つ目と3つ目が「bottom center」、2つ目と4つ目が「left top」の指定となります。

さて、再び画像自体の指定に戻ります。ここでよくよく画像の指定順序を見て下さい、キャラクタが最初で、山の背景が後です。通常、HTMLでは後にある方が前(上)面に表示されますが、この背景画像の場合は、最初の方が前(上)面に表示されますので、ご注意下さい。

上記は、backgroundショートハンドを使って、以下のようにも書けます。

background系のプロパティを使い、複数の背景画像の指定をすることができるようになりましたが、未だ1つだけしか指定できないのは、背景色(background-color)です。ですので、backgroundショートハンドを使って背景色を指定する際は、上書きされないようにその最後に書くか、

もしくは、普通に別途background-colorプロパティを使った方が分かり易いでしょう。

(素材配布元:旅のヤドカリ様

Copyright 2015 CSS3入門道場 All Rights Reserved.