【CSS】背景画像を指定しよう

ホームページに画像を貼る際にはimgタグを使ってHTMLベースで記述するのが一般的ですが、CSSを使用すると背景画像として装飾することも可能です。
今回は、背景画像の指定方法についてご紹介します。

背景を構成するプロパティ

背景に関連するプロパティを紹介します。
後述しますが、これらのプロパティはbackgroundプロパティで一括指定することも可能です。

background-colorプロパティ

背景色を指定することができます。背景画像の指定もある場合は、背景色が下に敷かれます。
値はカラーコードを指定します。初期値はtransparent（透明）であることに注意してください（noneや#fffではありません）。

background-attachmentプロパティ

画面をスクロールした時に、背景画像の位置を固定したままにするか、スクロールに合わせて移動するかどうかを指定することができます。
値はfixed(固定)やscroll(移動)などがあります。初期値はscrollです。

background-imageプロパティ

背景画像を指定します。値はurl(URL)の形です。

background-positionプロパティ

背景画像の位置を指定します。leftやtopなどのキーワードや％値、pxなどの単位の付いた数値でも指定が可能です。
%値や数値は通常左端や上端が開始位置になりますが、 それぞれの値の前に半角スペースを挟んで”right”や”bottom”を指定することで、右端や下端を開始位置にすることができます。

background-repeatプロパティ

背景画像を繰り返すかどうか、また繰り返し方法を指定することができます。
値は縦横に繰り返し表示するrepeat、横方向にのみ繰り返すrepeat-x、縦方向にのみ繰り返すrepeat-y、繰り返さないno-repeatがあります。
初期値はrepeatです。

background-sizeプロパティ

背景画像のサイズを指定します。
％値、pxなどの単位の付いた数値だけでなく、画像の縦横比を保ったまま最大サイズに拡大縮小されるcontainや、縦横比を保ったまま最小サイズに拡大縮小されるcoverもあります。初期値はautoです。

背景のスタイルを一括指定できるbackgroundプロパティ

backgroundプロパティは、背景関連のスタイルを一括指定できるプロパティです。
値を指定する順序は問われず、省略も可能です。
ただし、background-sizeを指定する場合は、
background-position / background-size
といった風に位置とサイズを順番に指定し、間をスラッシュで区切る必要があります。

背景画像とWebアクセシビリティ

位置や大きさなど、細かく指定できることは知っていただけたとは思いますが、結局何をimgタグで指定して、何を背景画像にすればよいのか悩むことがあるかもしれません。
背景画像の指定は、一つの観点としてWebアクセシビリティを考えて判断することができます。

背景画像はHTML上で指定しているタグではなく、CSSを使用した装飾です。
そのため、音声支援のツールが背景画像についてユーザーに伝えることはありません。
目の見えない人が知覚できない情報が画像に含まれる場合は、背景として組み込むべきではないので、CSSではなくHTMLのimgタグを指定して、alt属性で説明を記述するようにしてください。

まとめ

背景画像は、背景として利用するだけでなく、paddingなどと併用してアイコンの表示として指定したりすることもできます。
backgroundプロパティで一括指定されているとややこしそうに見えますが、構成しているプロパティを覚えておくと記述を省略できて便利です。ぜひ活用してみてください。