【CSS初心者向け】background-position-xで背景画像を思い通りに配置する方法

CSSのMiscellaneousにおけるbackground-position-xの解説

値

background-position-xは、以下の値を受け取ることができます。

• 長さ (px, em, remなど)：左端からのオフセットを指定します。
• パーセンテージ (%)：背景配置エリアの幅に対する割合を指定します。
• キーワード：以下のいずれかのキーワードを指定できます。
  • left：左端に配置します。
  • center：中央に配置します。
  • right：右端に配置します。

例

以下の例は、背景画像を左端から10px離れた位置に配置します。

.element {
  background-position-x: 10px;
}

以下の例は、背景画像を背景配置エリアの幅の50%の位置に配置します。

.element {
  background-position-x: 50%;
}

以下の例は、背景画像を右端に配置します。

.element {
  background-position-x: right;
}

background-position-xは、background-position-yと組み合わせて使用することで、背景画像の水平方向と垂直方向の位置を同時に設定することができます。

.element {
  background-position: 10px 50%; /* 水平方向に10px、垂直方向に50%の位置に配置 */
}

補足

• background-position-xは、backgroundプロパティの略記として使用することもできます。
• background-position-xは、背景画像が単一の画像の場合のみ有効です。背景画像が複数枚の場合、このプロパティは最初の画像にのみ適用されます。
• background-position-xは、IE 8以下ではサポートされていません。

background-position-xのサンプルコード

画像を左端から10px離れた位置に配置

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-position-x: 10px;
}

画像を中央に配置

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-position-x: center;
}

画像を右端から20px離れた位置に配置

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-position-x: right;
  background-position-x: -20px; /* 右端から20px離れた位置に配置 */
}

画像を背景配置エリアの幅の30%の位置に配置

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-position-x: 30%;
}

画像を背景配置エリアの幅の70%の位置に配置し、垂直方向に50%の位置に配置

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-position: 70% 50%;
}

画像を繰り返し表示し、水平方向に10pxずつずらす

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-repeat: repeat-x;
  background-position-x: 10px;
}

画像を繰り返し表示し、水平方向に中央に配置し、垂直方向に10pxの位置に配置

<div class="element"></div>

.element {
  background-image: url(image.jpg);
  background-repeat: repeat-y;
  background-position: center 10px;
}

background-positionプロパティは、background-position-xとbackground-position-yをまとめて設定することができます。

.element {
  background-image: url(image.jpg);
  background-position: 10px 50%; /* 水平方向に10px、垂直方向に50%の位置に配置 */
}

background-leftプロパティは、背景画像の左端の位置を設定します。

.element {
  background-image: url(image.jpg);
  background-left: 10px; /* 左端から10px離れた位置に配置 */
}

marginプロパティは、要素の外側の余白を設定します。背景画像を要素の外側に配置したい場合は、marginプロパティを使用することができます。

.element {
  background-image: url(image.jpg);
  margin-left: 10px; /* 左側から10pxの余白を設定 */
}

paddingプロパティは、要素の内側の余白を設定します。背景画像を要素の内側に配置したい場合は、paddingプロパティを使用することができます。

.element {
  background-image: url(image.jpg);
  padding-left: 10px; /* 左側から10pxの余白を設定 */
}

background-sizeプロパティは、背景画像のサイズを設定します。背景画像を要素のサイズに合わせて調整したい場合は、background-sizeプロパティを使用することができます。

.element {
  background-image: url(image.jpg);
  background-size: contain; /* 画像を要素のサイズに合わせて調整 */
}

background-clipプロパティは、背景画像のクリップ方法を設定します。背景画像を要素の形状に合わせて切り抜きたい場合は、background-clipプロパティを使用することができます。

.element {
  background-image: url(image.jpg);
  background-clip: border-box; /* 画像を要素の境界線に合わせて切り抜き */
}

上記の方法は、それぞれ異なる利点と欠点があります。どの方法を使用するかは、目的と状況によって異なります。