Mill's Note
  1. HOME
  2. CSS
  3. CSS-rules
  4. background-position

【CSS-rules】background-position

/

background-positionは、背景画像の初期位置を指定するcssプロパティ。
この位置は background-origin で設定した位置を基準として、そこからの相対位置になります。

※ background-origin未指定時は、初期値 (padding-box) が適用されます。

background の種類

一括指定はこちら ▶
.値用途説明
1background-image背景画像、又は、グラデーションカンマで繋いで複数指定可
2background-attachment位置の表示方法固定(fix)するか要素と一緒にスクロールするか等
3background-position画像の初期位置最初に表示される位置
4background-size画像のサイズ要素に対する相対、又は、指定サイズ
5background-origin要素に対する配置(開始)位置背景の開始点(左上)を指定する
6background-clip画像自身の配置位置指定に合わせ要素内でクリップされる
7background-repeat画像の繰り返し繰り返しの有無、方向、配置を指定
8background-color背景色

background-position 指定できる値

background-origin で設定した位置(左上)を基準として、[ 右・下 ] への移動距離、又は、キーワード位置、キーワード位置からの移動距離を、スペース' ' で区切って指定します

.指定名基準位置説明例
1top,bottom,left,right,centerキーワードキーワードを基準
+ 数値指定も可		bottom center
top 10px right 20px 等
2数値 + パーセント左上数値 + % 指定記載順 → 右 下
5% 10%
3数値 + 単位左上数値 + 単位指定記載順 → 右 下
20px 1em
  • 【1-キーワード】
    • キーワードが基準となる為、順序の指定はありません。
    • 数値と組み合わせる場合は キーワード 数値 キーワード 数値 のように記載します。
    • 数値は直前のキーワードを基準とする為、キーワード 数値 キーワード といった記述も可能です。
  • 【2-%】【3-単位】左上を基準として 右 下 の順番で移動距離を指定します。

background-position サンプル

共通となるcssはまとめて、それぞれclassを２重掛けにします。

  • bgp.jpg
  • サイズ:200×200px
  • タイプ:jpg
共通CSSとHTMLを見る
CSS code
.bga {
  width: 100%;
  max-width: 500px; 
  height: 350px;
  margin-bottom: 24px;
  padding:15px;
  background-image: 
    url("https://ドメイン/wp-content/uploads/2024/09/bgp.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
  background-color: #333;
  color:#fff;
  text-algin:right;
}
HTML code
<div class="bga">～～</div> /* ←値に合わせclassを2重掛けにします */

1 – キーワード指定

基準点 = キーワード

top 60px right 10px
HTML code
<div class="bga bga11">top 60px right 10px</div>
CSS code
.bga11 {background-position:top 60px right 10px;}
center
HTML code
<div class="bga bga12">center</div>
CSS code
.bga12 {background-position:center;}
  • 基本は 左or右 上or下 2方向を指定しますが、どちらか一方のみ指定すると 残りの方向は center として配置されます。
    leftのみ指定= left center; , topのみ指定= top center;

2 – 数値 + % 指定

基準点 (キーワードなしの場合) = 左上

10% 100%
HTML code
<div class="bga bga21">10% 100%</div>
CSS code
.bga21 {background-position:10% 100%;}
50%
HTML code
<div class="bga bga22">50%</div>
CSS code
.bga22 {background-position:50%;}
  • 0%=left又はtop, 50%=center, 100%=right又はbottom
  • %指定は細かい位置設定が難しい為、基本は 0, 50%, 100% の指定に利用し、細かい位置設定が必要な場合は 「キーワード + 数値単位」での指定をお勧めします。
  • 基本は 左or右 上or下 2方向を指定しますが、1個のみ指定した場合、指定値は左からの距離となり 上下方向は center として配置されます。
  • キーワード と 数値 をそれぞれ１個のみ指定した場合は、それぞれ個別の指定として設置されます。
  • キーワード 数値 数値 のように、キーワード1個と数値2個にすると、指定は無視され左上に配置されます。

3 – 数値 + 単位 指定

基準点 (キーワードなしの場合) = 左上

60px 10px
HTML code
<div class="bga bga31">60px 10px</div>
CSS code
.bga31 {background-position: 60px 10px;}
right 50px
HTML code
<div class="bga bga32">right 50px</div>
CSS code
.bga32 {background-position:right 50px;}
  • 基本は 左or右 上or下 2方向を指定しますが、1個のみ指定した場合、指定値は左からの距離となり 上下方向は center として配置されます。
  • キーワード と 数値 をそれぞれ１個のみ指定した場合は、それぞれ個別の指定として設置されます。
  • キーワード 数値 数値 のように、キーワード1個と数値2個にすると、指定は無視され左上に配置されます。

複数画像の配置

背景画像を複数設定した場合、値をカンマ','で繋ぐ事で、背景画像ごとにbackground-positionを対応させる事ができます。

画像-1

  • bgp.jpg
  • サイズ:200×200px
  • タイプ:jpg

画像-2

  • bgp2.jpg
  • サイズ:200×200px
  • タイプ:jpg
背景別に位置指定
HTML code
<div class="bga-b">背景別に位置指定</div>
CSS code
.bga-b {
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 430px; 
  margin-bottom: 24px;
  padding:15px;
  background-image: /* 2枚の背景画像を設置 */
    url("https://millmi.com/wp/wp-content/uploads/2024/09/bgp.jpg"),
    url("https://millmi.com/wp/wp-content/uploads/2024/09/bgp2.jpg");
  background-position: 30px 30px, right 30px bottom 30px; /* カンマで繋いで個別指定 */
  background-size: 200px;
  background-repeat: no-repeat;
  background-color: #333;
  color:#fff;
  text-align:right;
}

背景画像とbackground-positionは同じ順番で対応しています。
対応する値を変えたり、他のプロパティと組み合わせる事で複雑な表現も結構簡単に実現できますよ^^