background-position-y

background-position-yCSS のプロパティで、各背景画像における垂直の初期位置を設定します。位置は background-origin によって設定された位置レイヤーに対する相対位置です。

このプロパティの値は、その後で一括指定の background または background-position プロパティが定義されると上書きされます。

構文

/* キーワード値 */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> 値 */
background-position-y: 25%;

/* <length> 値 */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* 辺からの相対値 */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* 複数の値 */
background-position-y: 0px, center;

/* グローバル値 */
background-position-y: inherit;
background-position-y: initial;
background-position-y: unset;

background-position-y プロパティは、1つ以上の値をコンマで区切って指定します。

top
背景画像の上端を、背景位置レイヤーの上端に合わせます。
center
背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。
bottom
背景画像の下端を、背景位置レイヤーの下端に合わせます。
<length>
指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)
<percentage>
指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100%の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50%の値は背景画像を垂直方向に中央揃えします。

形式文法

[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

ここで
<length-percentage> = <length> | <percentage>

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 4
background-position-y の定義
編集者草案 長年の実装に合わせるため、 background-position の個別指定サブプロパティを初回定義

初期値top
適用対象すべての要素
継承なし
パーセント値背景配置領域の高さから背景画像の高さを引いた値に対する相対値
計算値絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。
アニメーションの種類離散値

ブラウザーの対応

BCD tables only load in the browser

関連情報