【background-position-x】背景画像の横方向の位置を指定

background-position-xプロパティでは、background-positionと同じく背景画像の位置を指定することができます。 ただし横方向の位置の指定となります。

このプロパティはbackground-imagebackground-repeatと併せて使用します。 またInternet Explorerが独自に拡張した仕様ですので、Firefox,Opera,Netscapeには対応していない場合があります。

なお背景画像の横方向、縦方向の表示位置はbackground-positionでも指定することができますので、無理にbackground-position-xプロパティを使う必要はありません。

書式

  • background-position-x : ……… 横方向(水平方向)の位置を指定

★:数値、キーワード、パーセント

数値
数値にpxなどの単位をつけて指定します。起点は背景画像が表示される領域の左端となります。例えば「background-position-x: 10px;」と指定した場合なら、背景画像が表示される領域の左端から10pxの位置が表示開始位置となります。
パーセント
背景画像が表示される領域の左端を起点とし、表示位置をパーセント(%)で指定します。例えば「background-position-x: 20%;」とした場合なら、表示領域の左端から20%の位置が背景画像の表示開始位置となります。
キーワード
left、center、rightといったキーワードで背景画像の位置を指定します。leftは0%、centerは50%、rightは100%を設定した場合と同様の結果となります。

使用した時の例

.sample1 {
  background-image:url("sample.jpg");
  background-repeat:no-repeat;
  background-position-x: center;
}

.sample1 {border: solid 1px #ccc; height:150px;}
<div class="sample1">center = 50% となる</div>

ブラウザ上の表示例

center = 50% となる

対応ブラウザなどのデータ

初期値 0% 値の継承 継承しない
適用可能な要素 すべての要素
対応ブラウザ Internet Explorer6~ , Safari3~

関連情報