CSSのbackground-position（背景位置）プロパティとは？基本の使い方を解説

Web開発では、背景画像の表示開始位置を細かく調整したい場面がよくあります。そんなときに活躍するのが、CSSの「background-position」プロパティです。この記事では、background-positionの基本的な仕組みと、値を指定して背景画像の位置を自由にコントロールする方法を、実例を交えてわかりやすく解説します。

構文

CSSセレクタ内でbackground-positionを使用するときの基本構文は次のとおりです。

background-position: 値;

値の指定方法は主に3種類あります。それぞれ順番に見ていきましょう。

1. キーワードで指定する

background-positionには、水平方向と垂直方向を表すキーワードを組み合わせて指定できます。

left top / left center / left bottom
right top / right center / right bottom
center top / center center / center bottom

最初のキーワードが水平方向（X軸）、2番目のキーワードが垂直方向（Y軸）の位置を表します。値を1つだけ指定した場合、Y軸の値は自動的に「center」として扱われます。

2. パーセンテージで指定する（x% y%）

キーワードと同様に、最大2つの値を指定できます。1つ目がX軸方向の水平位置、2つ目がY軸方向の垂直位置です。値を1つだけ指定した場合は、Y軸の値が50%に設定され、画像は縦方向の中央に配置されます。

各位置とパーセント値の対応は以下のとおりです。

左上：0% 0%
右上：100% 0%
左下：0% 100%
右下：100% 100%

3. 単位付きの数値で指定する（px / rem / em / pt など）

パーセントの代わりに、CSSの長さの単位を使って位置を指定することもできます。さらに、パーセントとpx・rem・em・ptなどを混在させて指定することも可能です。2つ目の値を省略した場合、Y軸の値は50%に設定されます。

コード例

それでは、実際にキーワード指定を使って背景画像の位置を変更してみましょう。以下は「top left（左上）」を指定した例です。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Top Left</title>
  <style>
    body {
      background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: top left;
      display: flex;
      flex-flow: row wrap;
    }
 
    div {
      height: 200px;
      width: 25%;
      background: transparent;
      border: 5px double ivory;
      margin: 20px;
    }
 
    #text-block {
      background: ivory;
      border: 5px double black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }
  </style>
</head>
 
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="text-block">top left</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
 
</html>

このコードではbackground-position: top left;と指定しているため、背景画像は画面の左上に配置されます。center right（中央右）やbottom left（左下）など、別のキーワードに書き換えるだけで、同じ構造のまま表示位置を簡単に変更できます。ぜひいろいろな値に置き換えて、挙動の違いを確認してみてください。

まとめ

background-positionプロパティを使えば、背景画像の表示位置を直感的かつ柔軟にコントロールできます。ポイントは以下の3つです。

キーワード指定：left / right / center / top / bottom の組み合わせで手軽に指定できる
パーセント指定：要素のサイズに対する相対的な位置を細かく制御できる
単位指定：px・rem・em・ptなどで正確なオフセットを設定でき、パーセントとの混在も可能

値を1つだけ指定した場合の挙動（Y軸が中央になる）も覚えておくと便利です。実際にコードを書き換えながら試して、自分のプロジェクトに合った指定方法を見つけてみてください。

CSS FlexboxとCSS Gridの違いとは?特徴と使い分けのポイントを解説

CSSのcursorプロパティ完全ガイド｜基本構文からカスタムカーソルまで

CSSを使ってユーザー評価スコアカードを作成する方法
CSSとFont Awesomeのアイコンフォントを組み合わせれば、レビューサイトやECサイトでおなじみの「ユーザー評価」スコアカードを簡単に作成できます。平均評価を示す星アイコンと、各星の評価件数を視覚化したプログレスバー（進捗バー）を並べることで、訪問者にとって直感的に分かりやすい評価パネルを実現できます。実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"
CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方
CSSのjustify-contentプロパティを使用すると、フレックスコンテナの主軸方向（デフォルトでは水平方向）に沿って子要素の間や周囲のスペースを分配し、柔軟に配置を制御できます。本記事では、複数のDIV要素を「左・中央・右」のように分散配置する方法を、具体的なコード例と表示結果とともにわかりやすく解説します。 justify-contentプロパティの構文 justify-contentは、display: flex;を指定した親要素（フレックスコンテナ）に対して設定します。基本の構文は以下のとおりです。セレクタ { display: