複数背景指定 [CSS3]

複数の背景を組み合わせるとき、divタグなどを入れ子にして（ネストして）、そのdivタグひとつひとつに背景を設定していましたが、CSS3では一つの要素に複数の背景を設定できるようになりました。

sample

＋

＝

display:flexを使っているのでIE9では横並びに表示されていないと思いますが、背景複数設定はプロパティそのものは以前からおなじみのbackground-imageなどを使用していて、IE9以降なら利用できます。

画像は indigonote さんの「Fireworksで使える斜線テクスチャ960」から拝借しました。

html

<div class="bg">ここにコンテンツ</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

とくにこれといった注意点はないです。適当に背景を入れたいタグを設置し、必要であればidやclassを設定してください。

css

.bg{
    background-image:url(画像のパス),
                     url(画像のパス);
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  • 組み合わせたい画像をbackground-imageで指定する。,（コンマ）で区切る。
    画像は重ね合わせたいときは、pngやgifなど透過画像を使用。位置をずらず場合はjpgなどでも良い。
  • 必要であれば、background-repeatやbackground-positionを設定。
    ,（コンマ）で区切って、それぞれの背景画像の繰り返しの有無や位置を設定。background-imageの記述順に対応する。

画像のパスや位置などをバラバラに記述するのではなくて、backgroundプロパティでまとめ書きも可能です。
その際も,（コンマ）で区切ります。
ちなみに、重なり順は先に記述した方が上になります。

戻る

Top