CSSのbackground-positionプロパティは何に使用されますか？

background-positionプロパティは、要素の背景画像の配置位置を指定するために使用されます。

background-positionで指定できる主な値は何ですか？

キーワード（top, bottom, left, right, center）、ピクセルやパーセンテージ、emなどで位置を指定できます。

background-positionを使って画像を中央に配置する方法は？

background-position center; を指定すると、画像が要素の中央に配置されます。

【CSS】background-positionプロパティの使い方 - 背景画像の配置を自在にコントロールする方法

概要

CSSのbackground-positionプロパティは、要素の背景画像の配置位置を指定するためのプロパティです。このプロパティを使用することで、背景画像を自由に動かし、視覚的に魅力的なデザインを実現できます。適切な配置は、ページ全体のバランスを整え、ユーザーの目を引く効果があります。本記事では、background-positionプロパティの使い方、指定できる値、そして実際の活用例について詳しく解説します。

background-positionプロパティの基本

background-positionプロパティは、背景画像を要素内のどこに配置するかを決めるために使用されます。このプロパティを活用することで、背景画像が要素のどの部分に表示されるかを調整でき、デザインの自由度が広がります。

基本構文

selector {
background-position: 水平方向  垂直方向;
}

例えば、次のように指定すると、div要素の背景画像が中央に配置されます。

div {
background-image: url('background.jpg');
background-position: center;
}

指定できる値

background-positionプロパティでは、さまざまな方法で背景画像の配置を指定できます。以下は主な指定方法です。

キーワード背景画像を配置する位置を指定します。指定できるキーワードには、top（上）、bottom（下）、left（左）、right（右）、center（中央）があります。

.top-left {
background-position: top left; /* 左上に配置 */
}

数値（ピクセルやパーセンテージ）背景画像の位置を数値で指定します。ピクセル（px）やパーセンテージ（%）などの単位で位置を細かく調整できます。

.offset {
background-position: 20px 30px; /* 水平に20px、垂直に30px移動 */
}

パーセンテージ（%）要素のサイズに対する割合で位置を指定します。0%が左または上端、100%が右または下端を表します。

.center-right {
background-position: 100% 50%; /* 右端の中央に配置 */
}

em、rem フォントサイズに基づく相対単位で指定できます。テキストのレイアウトに合わせた微調整に適しています。

.relative {
background-position: 2em 1em;
}

具体的な使い方 - 例

背景画像を中央に配置する

背景画像を要素の中央に配置するには、centerキーワードを使用します。これは、水平・垂直方向の両方において画像を中央に配置します。

.hero {
background-image: url('hero.jpg');
background-position: center; /* 中央に配置 */
background-size: cover;
}

背景画像を右下に固定する

background-positionでright bottomを指定すると、画像が右下に固定されます。これは、フッターや特定の装飾に効果的です。

.footer {
background-image: url('footer-pattern.png');
background-position: right bottom; /* 右下に配置 */
}

パーセンテージで微調整する

パーセンテージを使用することで、画像の位置をより精密に調整できます。例えば、background-position: 75% 25%;とすると、画像は水平75%、垂直25%の位置に配置されます。

.banner {
background-image: url('banner.jpg');
background-position: 75% 25%; /* 水平75%、垂直25%の位置に配置 */
}

背景画像を左右にずらす

background-positionを数値で指定することで、画像を特定のピクセル分だけ移動できます。例えば、20pxだけ画像を右に、10pxだけ下に移動することが可能です。

.card {
background-image: url('card-bg.png');
background-position: 20px 10px; /* 右に20px、下に10px移動 */
}

背景画像のスクロール効果と固定

background-positionとbackground-attachmentを組み合わせることで、スクロールに伴う背景画像の動きを制御できます。

スクロールで動かす

デフォルトでは、背景画像はスクロールすると一緒に動きますが、background-attachment: scroll;を明示することでスクロールに追従する動作を指定できます。

.scroll-effect {
background-image: url('scroll-bg.jpg');
background-position: center;
background-attachment: scroll; /* スクロールに応じて背景も動く */
}

背景を固定してパララックス効果

background-attachment: fixed;を使用すると、背景画像を固定してページがスクロールしても動かないように設定できます。これにより、パララックス効果を簡単に実現できます。

.parallax {
background-image: url('parallax.jpg');
background-position: center;
background-attachment: fixed; /* 背景を固定 */
background-size: cover;
}

注意点

高解像度の画像を使用する場合高解像度の背景画像はページの読み込み速度に影響を与えるため、圧縮や最適化を行うことが重要です。
レスポンシブデザインへの対応 background-positionは画面サイズに応じて異なる見え方をするため、メディアクエリで位置を調整するのが良いでしょう。
可読性の確認背景画像の位置により、テキストの可読性が低下する場合があります。適切な位置設定や背景のオーバーレイを使って可読性を確保しましょう。

まとめ

CSSのbackground-positionプロパティは、背景画像の配置位置を自在にコントロールできる便利なプロパティです。デザインのバランスを整えたり、インパクトを与えたりするために、位置を適切に調整することで、ウェブページ全体の見た目を大きく向上させることができます。複数の指定方法を組み合わせ、視覚的に魅力的なデザインを実現しましょう。

参照:

background-positionプロパティ - `CSS` | MDN