background-positionプロパティ
プロパティbackground-positionは、
要素の背景画像の位置を指定します。
位置は、任意の
サイズ単位
を使用して指定できます。最初の値は左からのオフセット、2番目の値は上からのオフセットを表します。
キーワードで位置を指定することもできます。
この場合、値の順序は重要ではありません。
垂直方向のキーワード：top、
center、bottom。
水平方向のキーワード：
left、center、right。
キーワードの使用方法
キーワードで画像を配置するには、
垂直方向と水平方向に1つずつ値を指定する必要があります。
たとえば、値top rightを指定すると、
画像は右上に配置されます。
単語の順序は重要ではありません：top rightと書くことも、
right topと書くこともできます。
キーワードcenterがある場合は、省略できます。
たとえば、top centerは、単にtopと同じです。
また、center centerは単にcenterと同じです。
構文
セレクター {
background-position: スペースで区切った2つの値;
}
例
デフォルトでは、背景画像は左上隅に配置されます：
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を右上隅に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: top right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を右下隅に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: bottom right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を右側かつ垂直方向中央に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: right 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: center center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を左から20px、上から40pxの位置に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: 20px 40px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を左から90%、上から100%の位置に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: 90% 100%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を左から30px、垂直方向の下端に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: 30px bottom;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を左から30px、垂直方向中央に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: 30px center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
背景画像を上から30px、水平方向中央に配置してみましょう：
<div id="elem"></div>
#elem {
background-position: center 30px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
関連項目
-
プロパティ
background、
背景に関する一括指定プロパティ
