background-position-xプロパティ
プロパティ background-position-x は、
要素の背景画像の水平方向の位置を設定します。
このプロパティは次の値を受け付けます：
left、center、right、さらに
パーセンテージやピクセル単位で背景の位置を指定することもできます。
構文
セレクタ {
background-position-x: 値;
}
例
背景画像を水平方向の左側に配置してみましょう：
<div id="elem"></div>
#elem {
background-position-x: left;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
では次に、背景を右側に移動させてみましょう：
<div id="elem"></div>
#elem {
background-position-x: right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を中央に配置してみましょう：
<div id="elem"></div>
#elem {
background-position-x: center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次に、背景の位置をパーセンテージで指定してみましょう：
<div id="elem"></div>
#elem {
background-position-x: 20%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
関連項目
-
背景に関する一括指定プロパティである
backgroundプロパティ -
背景の垂直位置を設定する
background-position-yプロパティ
