さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】背景画像を複数指定する(background)

Pocket
LINEで送る

従来のHTMLでは、1つの要素に対して1つしか背景画像が指定できませんでしたが、CSS3では1つの要素に対して複数の背景画像を指定することができます。

【使用例】

body {
  background-image:url(img/sample1.jpg), url(img/sample2.jpg);
  background-position:top left, bottom right;
  background-repeat:no-repeat;
  background-attachment:fixed;
  }

background-imageプロパティで背景に指定する画像のURLをカンマで区切り複数指定します。
background-positionプロパティで画像の表示位置を指定し、background-image同様にカンマで区切り指定します。
※画像の重なり順序は、最初に指定した画像の方が上にきます。

【書式】

background-image:url(画像1のURL), url(画像2のURL);
background-position:画像1の位置, 画像2の位置;

【対応ブラウザ】
FireFox3.5以降、Opera10.6以降、Safari4以降、Chrome3以降

カテゴリー:HP制作, css

コメントを残す

コメント内容