CSSのbackgroundプロパティとbackground-positionの正しい指定方法【ウェブデザイン技能検定 1級学科範囲】

CSSのbackgroundプロパティは背景を設定する際に不可欠なプロパティです。
しかし、誤った指定をすると意図したデザインが反映されなかったり予期しない結果になることがあります。
本記事ではbackgroundプロパティ全般について解説し特に間違いやすいbackground-positionの正しい指定方法を詳しく説明します。

backgroundプロパティとは？

backgroundプロパティは、要素の背景に関する設定を一括で行うためのショートハンド（省略記法）プロパティです。以下のような個別プロパティをまとめて指定できます。

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment

backgroundプロパティの正しい記述例

単一の背景指定

background: #fff url("background.jpg") no-repeat center center;

• 背景色：白（#fff）
• 背景画像：background.jpg
• 繰り返しなし（no-repeat）
• 位置：中央（center）

複数の背景指定

CSS3では、複数の背景画像を設定することが可能です。

background: url("image1.jpg"), url("image2.jpg");

背景サイズの指定

background-sizeを組み合わせて背景画像のサイズを設定します。

background: #fff url("background.jpg") center/cover no-repeat;

• center/coverは、背景画像の位置（center）とサイズ（cover）を指定します。

文法的に誤った記述例

1. 無効な値の使用

background: #fff content-box content-box; /* ✖️ 間違い */

理由: content-boxはbackground-originやbackground-clipで使用する値であり、この記述は文法的に不正です。

2. 空のurl()の使用

background: url(); /* ✖️ 間違い */

理由: URLが指定されていない場合、エラーや意図しない挙動を引き起こす可能性があります。

background-positionプロパティの詳細

正しい指定例

1. キーワードのみ

background-position: center center; /* 中央 */
background-position: top left;      /* 左上 */
background-position: bottom right; /* 右下 */

2. 数値のみ

background-position: 50% 50%; /* 中央 */
background-position: 100% 0%; /* 右上 */
background-position: 10px 20px; /* 左から10px、上から20px */

3. キーワードと数値の組み合わせ

background-position: top 50%; /* 上端から垂直方向に50% */
background-position: left 20px; /* 左端から20px */

間違いやすい指定例

1. キーワードと数値の順序が不適切

background-position: 50% center; /* ✖️ 間違い */

正しい記述:

background-position: center 50%; /* ✔️ 正しい */

2. 無効なキーワードの使用

background-position: middle; /* ✖️ 間違い */

正しい記述:

background-position: center; /* ✔️ 正しい */
background-position: 50% 50%; /* ✔️ 中央を数値で指定 */

3. 単位の不足

background-position: 50; /* ✖️ 間違い */

正しい記述:

background-position: 50%; /* ✔️ 単位を明記 */

4. 過剰な値の指定

background-position: center center center; /* ✖️ 間違い */

正しい記述:

background-position: center; /* ✔️ シンプルな記述 */

backgroundプロパティ活用のベストプラクティス

1. 順序を守る
   値の順序は以下のように記述するのが一般的です：
   • 背景色（background-color）
   • 背景画像（background-image）
   • 位置とサイズ（background-positionとbackground-sizeをスラッシュで区切る）
   • 繰り返し（background-repeat）
   • スクロール設定（background-attachment）
2. 複数画像を活用する
   複数の背景画像を設定してデザインの幅を広げる。
3. ブラウザ互換性に注意
   CSS3の一部機能が古いブラウザでサポートされていない場合があります。

まとめ

backgroundプロパティは、単純な背景設定から複雑なデザインまで対応可能な強力なツールです。しかし、特にbackground-positionでは記述ミスが起こりやすいため、注意が必要です。本記事を参考に正確な記述方法を習得し、美しいウェブデザインを実現しましょう。