CSSを使えば、背景に画像を表示させることができます。今までCSSで背景画像を指定するときには、「background:url(指定画像)」といったように「url()」の中に表示させたい画像を1つ読み込ませることができました。しかし、CSS3からはより柔軟な指定をすることができるようになりました。

1つボックスに複数の画像指定

CSS3では1つのボックス（要素）に対して、複数の画像を指定することができるようになりました。「url()」の部分をカンマ（,）で区切って表示させたい数だけ記述していきます。
例えば、四隅に背景画像を表示させたい場合は以下のようにCSSに記述します。

.box {
  background: url(),url(),url(),url() no-repeat;
  background-position: left top,right top,right bottom,left bottom;
}
複数の背景画像を指定できる

すると、このような感じで四隅に画像が配置されたボックスを作ることができます。

背景画像のサイズを指定

CSS3では「background-size」というプロパティを使って画像サイズを指定することができます。値には数値や単位を指定します。初期値は「auto」になっています。
例えば、以下のような指定ができます。

div {
  background: url(image.png) no-repeat;
  background-size: 200px 500px;
}

このように指定をした場合、幅を200px、高さを500pxで表示させる指定となります。値を2つ指定する場合は空白で区切って指定します。pxなどの単位以外にもパーセントなどの数値も指定できます。数値を1つだけ指定した場合は、元画像の縦横比を保ったままその数値に合わせて表示されます。
数値以外にも「cover」や「contain」といったキーワードを指定して表示させることもできます。「cover」を指定すると、元画像の縦横比を保ったまま、表示領域の全体を覆い尽くすという指定になります。よって、ウィンドウサイズを変えても常に表示領域全体に背景画像が拡大縮小しながら表示されます。「contain」を指定した場合は、元画像の縦横比を保ったまま画像全体が表示するという指定になります。よって、ウィンドウサイズを変えても常に画像全体が表示されます。
また、「url()」の部分を「linear-gradient()」という書式にするとグラデーション背景を作ることもできます。

この他にCSS3から追加された背景に関するプロパティに、「background-clip」や「background-origin」などのプロパティがあります。

おすすめの記事