Webサイトを作成する際、CSSで必ずといっていいほど、どこかに使用するプロパティの一つである「background」。Webサイトを制作する以上避けては通れないプロパティです。しかし、最初は背景画像を思ったように配置できないなど、色々悩むプロパティでもあります。自分も初心者のころは、思い描いた背景を配置できず苦労したことがあります。
しかし、「background」プロパティは最初は思い通りにいかないこともありますが、ポイントを掴み使い方をマスターすれば、いろいろな場所に使える便利なプロパティなので、うまく使いこなせるよう基本的なことをまとめてみました。
backgroundプロパティって何？
「background」はざっくり言うとHTMLタグ要素に背景の色や、画像を配置したり、背景画像の位置を決めたりするためのCSSプロパティになります。<img>タグでも画像表示は可能ですが、<img>タグと違うのは<img>タグは検索エンジンが画像を認識しますが、この「background」プロパティで表示した画像はデザインの一部として扱われます。よって重要な画像はタグで配置し、デザイン的な画像要素の場合、この「background」プロパティで配置するという使い分けができます。
backgroundプロパティで指定できる値
「background」プロパティは幾つか指定できる種類があります。以下によく使用されるプロパティをまとめてみました。別々に設定することもできますし、ショートハンドで「background」プロパティにまとめて指定することもできます。
background-color
背景の色を指定することができます。「rgba()」か「#fefefe」の様に指定します。
16進数カラーコードにつきましては下記Webサイトをご覧ください。
Web色見本・原色大辞典はこちら
background-image
「background-image」プロパティは背景に画像を指定できます。1つの画像を指定するのが一般的ですが、コンマ区切りで2つ以上指定することも可能です。画像へのアドレスは、絶対パスまたは相対パスで指定します。
画像を指定している場合、何らかの障害などの原因で画像が表示されないことがあります。その場合を想定して、「background-color」プロパティで背景色も指定しておくと良いでしょう。「background-image」と「background-color」プロパティを同時に指定した場合は、「background-image」の指定が上に配置されます。
background-size
「background-size」プロパティは、「background-image」で指定した背景画像をどのようなサイズで表示させるかを指定できます。レスポンシブWebデザインで作成する場合便利なのが、「cover」になります。「cover」は画像の縦横比を保持しながら、背景領域を完全に覆う最小サイズになるようにリサイズして配置します。背景領域のサイズがレスポンシブウェブデザインで可変する場合はとても便利です。
background: coverを指定した場合
他にも「background-size」プロパティには、「contain」が指定できます。「contain」は縦横比を保持しながら、背景領域に画像が全て収まる最大サイズになるように配置されます
background: containを指定した場合
background-repeat
「background-repeat」プロパティは、背景指定した画像を繰り返し配置するかの指定ができます。繰り返しをさせない場合は「no-repeat」を指定する必要があります。ヒーローイメージのように背景領域を1枚の画像で覆う場合はこの「no-repeat」を必ず指定します。小さな繰り返し背景で背景領域を覆う場合は「repeat」指定が必要になります。
他にも「background-repeat」プロパティには「repeat-x」と「repeat-y」が指定できます。「repeat-x」はX軸方向（横方向）に画像が繰り返し配置されます。「repeat-y」はY軸方向（縦方向）に画像が繰り返し配置されます。
background-position
「background-position」プロパティは配置した背景画像の配置位置を指定します。指定方法には、「top」「bottom」「right」「left」「center」で指定する方法と配置する要素の左上からのパーセントまたはpxなどで指定する方法があります。
「%」や「px」での位置指定も可能です。画像の左上を起点として、数値を入力します。数値で指定する場合は「横方向（X軸） 縦方向（Y軸）の順」で数値を指定してください。
background-attachment
「background-attachment」プロパティは、背景に指定した画像を固定するか、スクロールするかを指定できます。背景を固定すれば、背景画像は固定したままテキスト部分のみをスクロールさせる表現ができます。「background-attachment」プロパティは初期値がスクロールなので、敢えて指定する場合は「fixed」になるでしょう。
backgroundプロパティのショートハンド
「background」プロパティは一括指定が可能です。色や画像、画像配置位置、リピートを半角スペースで区切りながら一括指定ができます。順番は特に決まっていません。指定しない値は省略可能です。注意することは「background-size」で指定する「cover」などはbackground-positionの後に/を入れて指定するということです。
画像を複数指定する場合、ショートハンドだとうまくいかないので、その場合はショートハンドではなくpropertyに分けて記載する。
backgroundプロパティまとめ
「background」プロパティは、Webサイトを制作するにあたって、おそらく頻繁に使用するプロパティになります。「repeat」や「size」「position」はうまく使えれば、表現の幅も広がるので、初心者の方でも積極的にマスターした方が良いCSSプロパティになります。「background-clip」や「background-origin」は使用頻度は少ないと思うので今回の記事では割愛させていただきました。今回ご紹介したプロパティは使用頻度は高いので、徐々に使用方法をマスターしていきましょう。