background-position-yプロパティ
プロパティbackground-position-yは、
要素の背景画像の垂直位置を指定します。
プロパティは以下の値を取ることができます:
top、center、bottom、また
パーセントまたはピクセルで背景の位置を指定することも可能です。
構文
セレクタ {
background-position-y: 値;
}
例
背景画像を垂直方向の上端に配置してみましょう:
<div id="elem"></div>
#elem {
background-position-y: top;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次に、背景を中央に配置してみましょう:
<div id="elem"></div>
#elem {
background-position-y: center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次に、パーセントで背景の位置を指定してみましょう:
<div id="elem"></div>
#elem {
background-position-y: 80%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
関連項目
-
背景に関する一括指定プロパティである
background、
-
背景の水平位置を指定する
background-position-xプロパティ