background-position

概要

background-position CSS プロパティは、定義された背景画像の、background-origin で定義された背景レイヤーに対する初期の相対位置をセットします。

• 初期値 0% 0%
• 適用範囲 すべての要素
• 継承 継承しない
• 割合 背景位置レイヤーのサイズを参照し、そこから画像サイズを引いた値。
• メディア visual
• 計算値 1 個または 2 個の値が指定された場合、<length> は絶対値、それ以外は <割合> となります。
  3 個または 4 個の値が指定された場合、キーワードの組と、<length> または <割合> となります。

構文

background-position: <bg-position>[, <bg-position>]*
background-position: [ <割合>| <length>| left | center | right  ] 
                     [ <percentage> | <length> | top  | center | bottom ]?

background-position:  [ top | center | bottom ]

background-position:  inherit

詳細な内容は以下:

<bg-position> は以下のいずれか:

[ <割合>| <length>| left | center | right ]
[ <percentage> | <length> | top | center | bottom ]?
[ top | center | bottom ]
inherit

値

1 個または 2 個の値を指定し、サポートしているブラウザは 4 個まで指定できます。負の <割合> と <length> の値も許容されます。

• 値が 1 個だけ指定された場合、2 個目の値は center と仮定されます。
• 最初の値は水平位置を表し、2 番目の値は垂直位置を表します (少なくとも 1 個の値がキーワードでなければ)。

仕様上は、上からと左からだけでなく、4 個の値で任意の角からのオフセット位置を指定できます。4 個の値が指定された場合、2 側面と 2 個のオフセット値を含める必要があります。この指定方法はまだ、すべてのブラウザでサポートされていません。

<割合>

0% 0%, の値の組 (0 0 と等価) は、画像の左上角がボックスのパディング端に沿って配置されます。100% 100% の値の組は、画像の右下角をパディング領域の右下角に配置します。100% 100% の値の組は、画像をパディング領域の左から 14%、上から 84% の位置に配置します。

<長さ>

2cm 1cm の値の組は、画像をパディング領域の左から 2cm、上から 1cm の位置に配置します。

top

垂直位置 0% と等価です。

right

水平位置 100% と等価です。

bottom

垂直位置 100% と等価です。

left

水平位置 0% と等価です。

center

他の値が指定されなければ、垂直位置 50%、水平位置 50% と等価です。

例

実際の表示を確認

.exampleone {
  background-image: url("logo.png");
  background-position: top;
}

.exampletwo {
  background-image: url("logo.png");
  background-position: 25% 75%;
}

.examplethree {
  background: url("logo.png") 2cm bottom;
}

.examplefour {
  background-image: url("logo.png");
  background-position: center 10%;
}

.examplefive {
  background: url("logo.png") 3em 50% no-repeat;
}

.examplesix {
  background-image: url("logo.png");
  background-position: right 20px bottom 20px;
}
	
.exampleseven {
  /* 複数の背景画像: 各画像は、対応する位置スタイルにすべてマッチします。 */
  background-image: url("img1.png"), url("img2.png");
  background-position: 0 10px, center;
  background-repeat: no-repeat, repeat;
}

仕様

ブラウザ実装状況

関連情報

• 背景関連 CSS プロパティ : background 、 background-attachment 、 background-clip 、 background-color 、 background-image 、 background-origin 、 background-position 、 background-repeat 、 background-size
• 複数の背景 (Multiple backgrounds)