SYNCERのロゴ
アイキャッチ画像

background-position - 背景の位置

background-positionは、背景の位置を指定するプロパティです。水平方向と垂直方向、それぞれのオフセットを指定できます。

概要

名前
background-position
<bg-position>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ]| [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]| [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<length-percentage> = [ <length> | <percentage> ]
初期値
0% 0%
適用対象
全ての要素。
継承
しない。
パーセンテージ
refer to size of background positioning area minus size of background image; see text
メディア
visual
計算値
A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
アニメーションの可否
as repeatable list of simple list of length, percentage, or calc
仕様書
https://drafts.csswg.org/css-backgrounds-3/#the-background-position

チュートリアル

<length>、または<percentage>で距離を指定できます。この距離は、原点(background-origin)からの距離を意味します。1つ目の値が水平方向(左端からの距離)、2つ目の値が垂直方向(上端からの距離)に適用されます。1つの値だけを指定した場合、2つ目の値はcenter(50%)を指定したのと同じ扱いになります。

div {
	background-position: 25px 50px ;	/* 水平方向: 25px、垂直方向: 50px */
}

div {
	background-position: 25% ;	/* 水平方向: 25%、垂直方向: 50% */
}

パーセンテージの基準となる長さは「要素の枠線を含めたサイズ」から「背景画像のサイズ」を引いた長さです。つまり、50%なら画像はちょうど中央に、100%なら画像はちょうど端に位置する計算になります。

パーセンテージの基準となる長さ
パーセンテージの基準となる長さ

<length><percentage>の代わりに下記のキーワードを指定できます。

説明水平方向垂直方向
center中央(50%)
left左端(0%)×
right右端(100%)×
top上端(0%)×
bottom下端(100%)×
div {
	background-position: center center ;	/* 水平方向: 50%、垂直方向: 50% */
}

div {
	background-position: left ;	/* 水平方向: 0%、垂直方向: 50% */
}

div {
	background-position: left top ;	/* 水平方向: 0%、垂直方向: 0% */
}

div {
	background-position: top left ;	/* 不正な指定 */
}

3〜4つの値を用いる場合、特殊なルールになります。キーワードに続いて<length><percentage>を指定することで、「右端から〜px」「下端から〜px」といった指定になります。

div {
	background-position: right 25px bottom 50px ;	/* 水平方向: 右端から25px、垂直方向: 下端から50px */
}

どちらか一方の<length><percentage>を省略した場合、0pxを指定したのと同じ扱いになります。

div {
	background-position: right bottom 50px ;	/* 水平方向: 右端から0px、垂直方向: 下端から50px */
}

div {
	background-position: right 25px bottom ;	/* 水平方向: 右端から25px、垂直方向: 下端から0px */
}

div {
	background-position: right bottom ;	/* 特殊なルールから外れる */
}

デモ

背景の位置がそれぞれで違っているのを確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-image: url(./image.png) ;
	background-repeat: no-repeat ;
	border: 1px dotted #000 ;
	color: #fff ;
	margin: 24px 0 ;
	height: 180px ;
}

#hoge {
	background-position: 50% 50% ;
}

#fuga {
	background-position: right bottom ;
}

#piyo {
	background-position: right 25px bottom 25px ;
}
</style>
</head>
<body>
	<p>50% 50%</p>
	<div id="hoge"></div>
	<hr>
	<p>right bottom</p>
	<div id="fuga"></div>
	<hr>
	<p>right 25px bottom 25px</p>
	<div id="piyo"></div>
</body>
</html>

サポート状況

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
background-position×-29× ×××確認中-5.1× 確認中
3〜4つの値確認中確認中確認中確認中確認中確認中確認中確認中
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年11月4日 (土)
コンテンツを公開しました。