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>? ]#

where
<length-percentage> = <length> | <percentage>

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 4
background-position-y の定義
編集者草案 長年の実装に合わせるため、 background-position の個別指定サブプロパティを初回定義
初期値top
適用対象すべての要素
継承なし
パーセンテージrefer to height of background positioning area minus height of background image
メディア視覚
計算値A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-position-yChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 49IE 完全対応 6Opera 完全対応 15Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 49Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Two-value syntax (support for offsets from any edge)Chrome 未対応 なしEdge 完全対応 12Firefox 完全対応 49IE 完全対応 9Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報