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

こんにちは、@AWAKOJIです。

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

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

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

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

スポンサーリンク

使用する言語はCSS

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

CSSとは?書き方を簡単にわかりやすく説明(漫画付)
記事のポイント CSSはWEB上のデザインを担当する言語である プログラミング初心者 『CSS?なんじゃそれ?HTMLとどんな関係があるの?』 こんにちは、AWAKOJIです。 今日も薬剤師をしながらプログラミングの勉...

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

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


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

“background”(背景)

“position”(位置)

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

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

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

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

以下、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)を読み込んでください。

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

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

水玉の画像(waterball.png)

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

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

【HTML&CSS】background-imageの使い方をわかりやすく説明
こんにちは、@AWAKOJIです。 今日も、薬剤師をしながらプログラミングの勉強をしています。 この記事では、webサイトの背景に画像を表示する方法を解説します。 そして、解説のあとで、実際webサイトに画像を表示させてみます。 ...
【HTML&CSS】background-repeatの使い方をわかりやすく説明
こんにちは、@AWAKOJIです。 今日も、薬剤師をしながらプログラミングの勉強をしています。 この記事では、webサイトに表示した背景画像の繰り返し(background-repeat プロパティ)の設定について解説します。 こ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

数値

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

と同じ意味になります。

値の省略

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

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

表示の起点について

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

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

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

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

また、background-originプロパティを使うと起点を変えることもできます。

まとめ

以上、background-positionプロパティについて説明しました。
まとめると、

  • 画像の繰り返しの設定はCSSを使う
  • プロパティはbackground-position
  • セレクタはすべての要素を書くことができる
  • 横方向の値はleft、center、right、数値(pxや%など)
  • 縦方向の値はtop、center。bottom、数値(pxや%など)
  • 表示の基準点はpadding領域の左上だが変更することもできる

以上になります。

参考サイト:background-position – MDN – Mozilla

スポンサーリンク

おすすめ記事

フォローする