【HTML＆CSS】background-positionの使い方をわかりやすく説明

こんにちは、@AWAKOJIです。

今日も、薬剤師をしながらプログラミングの勉強をしています。

この記事では、webサイトに表示した背景画像の位置（background-position プロパティ）の設定について解説します。

このプロパティを使うことで、background-imageプロパティによって表示される画像の位置を調整することができます。

うまく利用して見やすいwebサイトを目指しましょう。

この記事の内容

使用する言語はCSS
使用するプロパティはbackground-position
background-positionのセレクタ
background-positionの値
表示の起点について
まとめ

使用する言語はCSS

背景画像の繰り返しを設定するにはCSSを使います。
CSSとは、webサイトのデザインを担当する言語です。
詳しくはこちらの記事をどうぞ。

使用するプロパティはbackground-position

CSSの基本構造は以下の通りです。

そして今回、背景画像の繰り返しを設定するため、background-repeatプロパティを使います。

“background”(背景)

“position”(位置)

なので覚えやすいですね！

また、横方向と縦方向の位置を表示する必要があるため、値は２つ書く必要があります。

つまり背景画像の繰り返しを設定するための基本構造は以下のとおりになります。

値と値の間は半角スペースを空けてください。

以下、background-positionプロパティを使うときのセレクタと値について解説していきます。

background-positionのセレクタ

background-imageプロパティと同様、セレクタにはすべての要素を書くことができます。

つまり、背景画像の表示位置は

body⇒サイト全体

h1⇒見出し

table⇒表

tr⇒表の行

div⇒ブロックレベル要素

span⇒インライン要素

など、どの場所にも設定できるというわけです。

background-positionの値

値に書けるのは

キーワード
数値

の2つです。

それぞれ見ていきます。

キーワード

値にキーワードを用いることができます。

具体的には、

横方向⇒left(左)、center(中央)、right(右)
縦方向⇒top(上)、center(中央)、bottom(下)

です。

実際に表示位置を確認してみましょう。

HTMLファイルは以下の通りです。

headタグ内でCSSファイル(sample.css)を読み込んでください。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>background-repeatサンプル</title>
    <link rel="stylesheet" href="./sample.css">
  </head>
  <body>
    <p>サンプルです。</p>
    <p>値の違いを見ていきます。</p>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>background-repeatサンプル</title>

</head>

<body>

<p>サンプルです。</p>

<p>値の違いを見ていきます。</p>

</body>

</html>

CSSファイル(sample.css)は以下の通りです。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

}

html,body{

height:100%;

}

background-imageプロパティで水玉の画像ファイル(waterball.png)を設定しています。

水玉の画像(waterball.png)

そして、background-repeatプロパティの値をno-repeatにすることで画像の表示を1つだけにしてください。

それぞれのプロパティについて詳しく知りたい方は以下の記事をご覧ください。

さらに、最後に5行目にbodyの領域をwebサイト全体にすることで、背景画像がうまく挙動するようにしています。

この状態のブラウザ表示は以下の通りです。

※ブラウザ表示(クリックで拡大表示します)

背景画像の表示の起点は左上なので、水玉は左上に１つだけ表示されています。

この状態で、background-positionプロパティをたしていきます。

①横方向をleft、縦方向をtopに指定します。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:left top;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:left top;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

もともと起点が左上なので表示位置は変わっていません。

②次に横方向をcenter、縦方向をcenterに指定します。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:center center;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:center center;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

水玉が中央に表示されました。

③そして、横方向をright、縦方向をbottomに指定します。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:right bottom;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:right bottom;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

水玉が右下に表示されました。

数値

画像の表示位置を指定するために数値を書くことができます。

表示領域の左上から画像の左上の距離を書きます。

数値の単位は、px、cm、ch、emなどがあります。

pxを使って表示位置をみてみます。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:300px 400px;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:300px 400px;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

画像の左上の位置が、表示領域の左上から横に300px、縦に400pxの位置になるように表示されました。

%で表示位置を設定することもできます。

表示領域の座標に画像の座標が重なるように表示されます。

よくわからないと思うので実際にみてみます。

①『0％　０％』の指定をします。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:0% 0%;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:0% 0%;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

②『50% 50%』の指定をします。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:50% 50%;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

③『100% 100%』の指定をします。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:100% 100%;
}
html,body{
  height:100%;
}

body{

background-image:url(./waterball.png);

background-repeat:no-repeat;

background-position:100% 100%;

}

html,body{

height:100%;

}

※ブラウザ表示(クリックで拡大表示します)

表示領域の座標と画像の座標が重なるように表示されます。
つまり

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

と同じ意味になります。

値の省略

background-positionプロパティで指定する値は省略することができます。

leftまたはrightだけ(横方向のみの記載)⇒縦方向はcenter
topまたはbottomだけ(縦方向のみの記載)⇒横方向はcenter
centerだけ⇒中央表示
数値だけ⇒横方向はcenter

表示の起点について

値を数値にしたときの起点は、表示領域の左上です。

もう少し詳しくいうと、padding領域の左上です。

この起点を右下にすることもできます。

body{
  background-image:url(./waterball.png);
  background-repeat:no-repeat;
  background-position:right 100px bottom 100px;
}
html,body{
  height:100%;
}