MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概要

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

注: このプロパティの値が、background-position CSS プロパティの後の要素に適用される background 短縮プロパティで設定されていない場合、このプロパティの値は短縮プロパティによって初期値にリセットされます。

初期値0% 0%
適用対象全要素. It also applies to ::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
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますの反復可能リスト、の単純なリスト形式$1$、length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;

値

<position>
要素ボックスの辺に対する 2 次元の位置を表す 1 個から 4 個の値からなる <position>。相対値または絶対値のオフセットを指定できます。位置を要素ボックスの外側に設定することも可能です。

形式文法

<position>#

例

CSS background と複数の画像を使った例

There should be three yellow elements, each with a star in a different position. The final rectangle has two background images, each with a different background-position.

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-position の例 */

/* これらの例は background 短縮 CSS プロパティを使用しています */
.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 の定義		 勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
複数の背景 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
4 値構文（任意の辺に対するオフセットのサポート） 25 (maybe earlier) 13.0 (13.0) 9.0 10.5 7.0
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1) (有) (有) (有)
複数の背景 ? 1.0 (1.9.2) ? ? ?
4 値構文（任意の辺に対するオフセットのサポート） 未サポート 13.0 (13.0) ? ? iOS 7.0

関連情報

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

タグ: 
 このページの貢献者: Simplexible, Prinz_Rana, mrstork, teoli, SphinxKnight, mitsuba-clover, Sebastianz, ethertank, Marsf
 最終更新者: Simplexible,