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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-position-yChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 49IE 完全対応 6Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 49Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
Two-value syntax (support for offsets from any edge)Chrome 未対応 なしEdge 完全対応 12Firefox 完全対応 49IE 完全対応 9Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 完全対応 49Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mdnwebdocs-bot
最終更新者: mfuji09,