[CSS] background-position

CSS の background-position は、 background-origin で設定された位置を起点として、背景画像の表示位置を設定するプロパティです。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

background-position Code DEMO

他の値を持つ場合があります。詳細は以下をご確認下さい

background-position の詳細

利用できる値

無指定 (初期値)

auto

auto 又は 無指定の場合は (left top) になる

1点指定 (ショートハンド)

center

(center center) という指定と同じ

top

(center top) という指定と同じ

bottom

(center bottom) という指定と同じ

right

(right center) という指定と同じ

left

(left center) という指定と同じ

10%

(10% center) という指定と同じ

20px

(20px center) という指定と同じ

2点指定

30% top,
right bottom,
10px 10px

横位置と縦位置をスペースで区切って繋ぐ。
キーワード同士の場合は順不同で良いが、数値や%の指定がある場合は「横 縦」の順に指定する。

4点指定

left 20px bottom 10%

キーワードと数値をスペースで繋ぐ。
キーワードで基準点を決め、そこからの相対位置を数値で指定する。

background-position の複数指定

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景画像ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png), url(img/sanple3.jpg); 
background-position: left, 10% 100%, 20px center;

background-position 設定時の注意

• background-positionは、基本的に「横 縦」 の順に指定します。
• キーワードでの指定がない場合は「left top」が基準点です。
  (ショートハンド 及び 50%, 100% を除く)
• 1点指定(ショートハンド)の場合、省略された側は center となります。
• キーワード指定は、要素と背景画像の両方を指し
  • center  ⇒ 要素の中央、画像の中央
  • top       ⇒ 要素の上端、画像の上端
  • bottom ⇒ 要素の下端、画像の下端
  • left       ⇒ 要素の左端、画像の左端
  • right     ⇒ 要素の右端、画像の右端

  が一致するように配置されます。

• 0%, 50, 100% は、キーワード指定と同様に扱われ
  • 0%     ⇒ top 又は left と同じ
  • 50%   ⇒ center と同じ
  • 100% ⇒ bottom 又は right と同じ

  となるよう配置されます。

• 上記以外の % 及び 固定単位での指定は、全て基準点からの相対となり
  • 10%  ⇒ top 又は left から 10%
  • 50px  ⇒ top 又は left から 50px

  となるよう配置されます。

  ※固定単位 ⇒ px,em,rem… 等htmlで使用可能な一般的な単位
  (絶対的な長さの単位、及び、相対的な長さの単位の一部)

• background-positionは「画像」のみに反映されます。
  (gradientは固有のサイズを持たない為、適用されません)

ブラウザ対応状況 (2020/07 現在)

• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m