background-positionプロパティ

プロパティbackground-positionは、 要素の背景画像の位置を指定します。 位置は、任意の サイズ単位 を使用して指定できます。最初の値は左からのオフセット、2番目の値は上からのオフセットを表します。

キーワードで位置を指定することもできます。 この場合、値の順序は重要ではありません。 垂直方向のキーワード：top、 center、bottom。 水平方向のキーワード： left、center、right。

キーワードの使用方法

キーワードで画像を配置するには、 垂直方向と水平方向に1つずつ値を指定する必要があります。 たとえば、値top rightを指定すると、 画像は右上に配置されます。

単語の順序は重要ではありません：top rightと書くことも、 right topと書くこともできます。 キーワードcenterがある場合は、省略できます。 たとえば、top centerは、単にtopと同じです。 また、center centerは単にcenterと同じです。

構文

cssセレクター {
  background-position: スペースで区切った2つの値;
}

例

デフォルトでは、背景画像は左上隅に配置されます：

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を右上隅に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: top right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を右下隅に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: bottom right;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を右側かつ垂直方向中央に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: right center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像をブロックの中央に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: center center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を左から20px、上から40pxの位置に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: 20px 40px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を左から90%、上から100%の位置に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: 90% 100%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を左から30px、垂直方向の下端に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: 30px bottom;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を左から30px、垂直方向中央に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: 30px center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

背景画像を上から30px、水平方向中央に配置してみましょう：

html<div id="elem"></div>

css#elem {
  background-position: center 30px;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目