CSSのbackground-positionプロパティ

例

背景画像を配置する方法：

body {
  background-image: url('w3css.gif');
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このbackground-positionプロパティは、背景画像の開始位置を設定します。

ヒント：デフォルトでは、背景画像は要素の左上隅に配置され、垂直方向と水平方向の両方で繰り返されます。

デフォルト値：	0％0％
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSS1
JavaScript構文：	object .style.backgroundPosition = "center"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
background-position	1.0	4.0	1.0	1.0	3.5

注： IE8以前では、1つの要素で複数の背景画像をサポートしていません。

CSS構文

background-position: value;

プロパティ値

Value	Description	Play it
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

背景画像を上部の中央に配置する方法：

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}

例

背景画像を右下に配置する方法：

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

例

パーセントを使用して背景画像を配置する方法：

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

例

ピクセルを使用して背景画像を配置する方法：

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}

例

さまざまな背景プロパティを使用して、「ヒーロー」画像を作成します。

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

CSSリファレンス

CSS Properties