background-position-y

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

background-position-y: top;

background-position-y: center;

background-position-y: 25%;

background-position-y: 2rem;

background-position-y: bottom 32px;

<section class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-color: navajowhite;
  background-image: url("/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  height: 100%;
}

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

構文

css
/* キーワード値 */
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: revert;
background-position-y: revert-layer;
background-position-y: unset;

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

値

top

背景画像の上端を、背景位置レイヤーの上端に合わせます。

center

背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。

bottom

背景画像の下端を、背景位置レイヤーの下端に合わせます。

<length>

指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)

<percentage>

指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。 0% の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、 100% の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、 50% の値は背景画像を垂直方向に中央揃えします。

公式定義

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

形式文法

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

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

例

基本的な例

次の例は、シンプルな背景画像の実装で、 background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

結果

辺からの相対値

次の例は、辺からの相対オフセット構文に対応していることを示すもので、開発者は背景を任意の辺からオフセットすることができます。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

結果

仕様書

Specification
CSS Backgrounds Module Level 4
# background-position-longhands

ブラウザーの互換性

関連情報