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

background-position-yプロパティは、background-imageで指定した背景画像の縦方向の表示位置を個別に指定することができます。 ただしbackground-positionでも背景画像の位置を指定できるため、わざわざbackground-position-yを使用する必要はありません。

またこのプロパティはInternet Explorerが独自に拡張した仕様となります。そのため一般的なブラウザでは対応していない場合がありますのでご注意下さい。

書式

  • background-position-y : ……… 縦方向(垂直方向)の位置を指定

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

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

使用した時の例

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

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

ブラウザ上の表示例

bottom = 100% となる

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

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

関連情報