background-position

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

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

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

• キーワード値 top、 left、 bottom、 right のうちの一つの場合。ここで 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;
}

結果

仕様書

ブラウザーの対応

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 でリリース予定) では修正されています。

関連情報

• background-position-x
• background-position-y
• background-position-inline
• background-position-block
• 複数の背景
• transform-origin