CSS background-position-y 属性

定義と用法

background-position-y 属性は、背景画像のy軸上の位置を設定するために使用されます。

ヒント：デフォルトでは、背景画像は要素の左上隅に配置され、垂直および水平方向に繰り返されます。

y軸上で背景画像を配置する方法は：

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

背景画像をトップに配置する方法は：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

パーセントを使用してy軸上で背景画像を定位する方法：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

ピクセルを使用してy軸上で背景画像を定位する方法：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

background-position-y: value;

値	説明
top	背景定位をy軸のトップに設定します。
bottom	背景定位をy軸のボトムに設定します。
center	背景定位をy軸の中心に設定します。
y%	y軸のトップは0%、ボトムは100%です。百分比值は、背景定位エリアの高さから背景画像の高さを引いたものです。
ypos	トップからの垂直距離です。単位はピクセル（例：0px）などができます CSS 単位。
ypos offset	二値構文、FirefoxとSafariでのみサポートされています。 ypos topまたはbottomに設定します。 offset 背景画像と ypos で設定されたトップまたはボトムの垂直距離です。単位はピクセル（例：0px）などができます CSS 単位。
initial	この属性をデフォルト値に設定します。参照してください： initial。
inherit	この属性を親要素から継承します。参照してください： inherit。

デフォルト値：	0%
継承性：	いいえ
アニメーション作成：	サポート。参照してください：アニメーション関連属性。
バージョン：	CSS3
JavaScript 语法：	object.style.backgroundPositionY="center"

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

	Chrome	Edge	Firefox	Safari	Opera
単値構文	1.0	12.0	49.0	1.0	15.0
二値構文	サポート外	サポート外	49.0	15.4	サポート外