background-positionプロパティの使い方

背景画像の表示位置を指定することができます。

表示の仕方

表示の仕方はキーワードと数値で指定することができます。何も指定しない場合左上がデフォルトの表示位置になります。

キーワード
- 横方向に
  - left
  - right
  - center
    -縦方向に
  - top
  - bottom
  - center
数値
- px
- rem
- %

実際に記述

今回は右下に表示する方法とpxを使って表示するcssを紹介します。

キーワードで指定右下に表示

background-position: right bottom; この記述で背景画像を右下に表示できるのですが何故か縦軸方向に center bottomを指定すると上側に移動する不具合が生じていました。
height: 100vh;この記述をbody要素に追加し表示領域を確保することで解決しました。
背景画像は通常、body 要素にコンテンツがある程度含まれているときに使用されますが、私の場合は body 内に要素がほとんどなく、表示領域が足りない状態でした

style.css

body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}

数値で指定 pxの使い方

左上 0,0座標を基準として、右側に200px移動（200px分の余白）下側に350px移動(350px分の余白)といったイメージです

style.css

body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: 200px 350px;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}

数値で指定 %使い方

親要素の大きさを基準に2軸の指定をすることができます。
以下の３種類はキーワードで指定した表示と同じです

left top 0% 0%
center center 50% 50%
right bottom 100% 100%

style.css


body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: 0% 0%;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}

数値で指定 rem使い方

remはhtmlのフォントサイズを基準に表示位置を指定することができます。ブラウザのデフォルトの大きさは16pxです。今回はcssでフォントサイズを16pxに指定しました。
0rem 0remは左上に表示 1rem は16px移動。 2remは32px移動させることができます

style.css

html{
    font-size: 16px; /*基準*/
}

body {
    background-image: url("img/img.png");
    background-repeat: no-repeat;
    background-position: 0rem 0rem;
    height: 100vh; /* 表示領域全体の高さを確保 */
    
    /*bodyに要素がないと表示領域が足りない場合がある*/
    
}