背景の要素を自在に設定！backgroundプロパティで一括指定してみよう -前編-

CSS フロントエンド

こんにちは、ユアサです。
今回は、最近やっと使い慣れてきたbackgroundプロパティ（以下backgorundと表記します）について、どのような値を指定できるのかまとめたいと思います。というのも、backgroundは色、画像、位置などを一括指定※できるプロパティなので、初見で見た時に情報量が多く「？？？？」と疑問符が浮かんでいました・・・・。
結局前回に引き続き今回も備忘録を兼ねての記事となりますが、どうか温かい目で見守りながら読んでいただけると幸いです。
※「一括指定」は「ショートハンド」とも呼ばれます。

backgroundで一括指定できるプロパティ

そもそもbackground一つでどれだけのプロパティとその値を指定できるのかというと、以下に書き出したものが指定可能です。

  • background-attachment：画面スクロール時に背景を固定・非固定するのを指定する
    • scroll：初期値。背景を要素自身に固定するため、要素内をスクロールしても背景固定
    • fixed：背景を表示領域に固定するため、ページ内をスクロールしても背景固定 （background-clip: text;との併用は不可）
    • local：背景をコンテンツそのものに固定するため、スクロール時に背景も連動
  • background-clip：要素の背景の適用範囲を指定する
    • border-box：初期値。背景を要素の外枠まで拡張
    • padding-box：背景をパディング領域の外枠まで拡張、境界下部には背景は拡張されない
    • content-box：背景をコンテンツボックス内（パディング領域の内枠より内側）に切り取って表示
    • text：背景を前景のテキスト内に切り取って表示
  • background-color：要素の背景色を指定する（値としてカラーコードを入力する）
    • transparent：初期値。
  • background-image：要素に背景画像を設定する
    • none：初期値。「画像を用いない」ことを指定する
    • url('背景画像のパス')：背景画像をパス表記で表示させる
  • background-origin：背景画像をボックス内に表示する際の基準位置を指定する（background-attachment: fixed;が指定されている場合は反映されない）
    • padding-box：初期値。ボーダーを除いた要素のパディング領域を基準にする
    • border-box：ボーダーを含めた要素内の端を基準にする
    • content-box：パディング領域を含まない要素のコンテンツ領域を基準にする
  • background-position：背景画像の表示開始位置を指定する（X・Y座標を指定）
    • 0% 0%：初期値。パディング領域を含めた要素内の左上端を基準に配置する
  • background-repeat：背景画像のリピートの仕様を指定する
    • repeat：初期値。縦横に背景画像を繰り返し、表示しきれない分は切り取られて表示
    • repeat-x：X座標にのみ背景画像を繰り返し表示
    • repeat-y：Y座標にもみ背景画像を繰り返し表示
    • no-repeat：繰り返さず一度のみ表示
  • background-size：背景画像のサイズを指定する（pxや%などの具体的な数値での指定も可）
    • auto auto：初期値。背景画像の元サイズのまま表示
    • contain：縦横比を保持し、背景領域に治る最大サイズになるよう背景画像を伸縮
    • cover：縦横比を保持し、背景領域を完全に覆う最小サイズになるよう背景画像を伸縮

実際に書いてみるとこんな感じです。

See the Pen background by felly (@felly00505) on CodePen.

実は一括指定の際に書く順番はどれから始めても基本的にOKですが、background-positionとbackground-sizeを一緒に指定する場合は必ず（background-positionの値） / （background-sizeの値）の順番と方法で表記しないといけないルールがあります。

アクセシビリティの面で気をつけたいこと

上記で紹介した中でもbackground-clip: text;とbackground-colorプロパティについてですが、こちらは表示の視認性と強く関係しているため背景色とその上に表示されているテキストの色とのコントラスト比は、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが推奨されています。
特にbackground-clip: text;については背景画像ありきの指定になるため、仮に背景画像が読み込まれなかった際に視認性が著しく低下することが危惧されます。これを防ぐために、backgroundーcolorで色を指定して背景画像が表示されなかった際の代替としておくことが推奨されています。

まとめ

今回はbackgroundプロパティで一括指定できるプロパティとその値について、役割も含めて一通りまとめました。
backgroundで指定できる且つそれぞれ役割が違うプロパティ同士とはいえど必ずしも相性が良いとは限らないため、次回の後編ではbackgroundで実際にスタイルを組んでみると同時に一部スタイルが反映されなくなる例をいくつか紹介していければと思います。
今回も最後まで読んでいただきありがとうございました（^人^）