CSSbackground-position プロパティは、設定されたそれぞれの背景画像の初期位置を、 background-origin で定義された背景レイヤーからの相対位置で設定します。

構文

/* キーワード値 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> の値 */
background-position: 25% 75%;

/* <length> の値 */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* 複数の画像 */
background-position: 0 0, center;

/* 辺からのオフセット値 */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* グローバル値 */
background-position: inherit;
background-position: initial;
background-position: unset;

background-position プロパティは1つ以上の <position> 値をコンマで区切って指定します。

<position>
<position> です。位置は要素のボックスの辺を基準にして項目を配置するための XY 座標を定義します。1つまたは2つの値を使用して定義できます。2つの値を使用する場合は、最初の値が水平位置を表し、2番目の値が垂直位置を表します。1つの値しか指定されない場合、2番目の値は "center" とみなされます。

値1つの構文: 値は以下のようになります。

  • center のキーワード値の場合は、画像を中央揃えにします。
  • キーワード値 topleftbottomright のうちの一つの場合。アイテムを配置する辺を指定します。もう一方の寸法が50%に設定されていれば、指定された端までの間の中央に配置されます。
  • <length> または <percentage> の場合。これは左からの相対位置の X 座標を指定し、 Y 座標は50%に設定されます。

値2つの構文: 1つ目の値が X を定義し、もう1つの値が Y を定義します。両方が以下の値を取ることができます。

  • キーワード値 topleftbottomright のうちの一つの場合。ここで left または right が指定された場合は、これが X 座標を定義し、もう一方の値が Y 座標になります。 top または bottom が指定された場合は、これが Y 座標を定義し、もう一方の値が X 座標を定義します。
  • <length> または <percentage> の場合。もう一方の値が left または right の場合、この値は上辺からの相対的な Y 座標を定義します。もう一方の値が top または bottom の場合、この値は左辺からの相対的な X 座標を定義します。両方の値が <length> または <percentage> の値である場合は、最初の値が X 座標を定義し、2番目の値が Y 座標を定義します。

注:

  • 1つ目の値が top または bottom である場合、もう一方の値は top または bottom であってはいけません。
  • 1つ目の値が left または right である場合、もう一方の値は left または right であってはいけません。

つまり、 "top top" や "left right" は有効ではありません。

形式文法

<bg-position>#

where
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]

where
<length-percentage> = <length> | <percentage>

以下の3つの例は、 CSS background を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3番目の例では1つの要素内にある2つの異なる背景画像の位置を指定する方法を示しています。

HTML

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS

/* すべての DIV で共有される */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* これらの例は background 一括指定プロパティを使用しています */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/* 複数の背景画像: 各画像は対応する位置スタイルに、
   最初に指定されたものから順に対応付けられます。 */
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
background-position の定義
勧告候補 複数の背景のサポートを追加。4個の値を持つ構文、実装に一致するように割合の定義を調整。
CSS Level 2 (Revision 1)
background-position の定義
勧告 キーワード値と <length> および <percentage> の値の混合指定を許容。
CSS Level 1
background-position の定義
勧告 初回定義。

初期値0% 0%
適用対象全要素。 ::first-letter and ::first-line にも適用されます。
継承なし
パーセンテージrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
メディアvisual
計算値a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage
アニメーションの種類repeatable list of simple list of length, percentage, or calc
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112143.51
Multiple backgrounds1123.6910.51.3
Four-value syntax (support for offsets from any edge)251213910.57
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
Multiple backgrounds あり あり あり あり あり あり あり
Four-value syntax (support for offsets from any edge) あり あり あり14 あり あり あり

Quantum CSS のメモ

  • Gecko には background-position が異なる数の <position> の値を持つ2つの値の transition ができないというバグがあります。例えば background-position: 10px 10px;background-position: 20px 20px, 30px 30px; などです(バグ 1390446 を参照)。 Firefox の新しいパラレル CSS エンジン(Quantum CSS または Stylo と呼ばれており、 Firefox 57 でリリース予定)では修正されています。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,