background-position

概要

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

構文

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;
}

出力

仕様

ブラウザ実装状況

関連情報

• 複数の背景 (Multiple backgrounds)