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

こんにちは、@AWAKOJIです。

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

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

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

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

スポンサーリンク

使用する言語はCSS

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

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

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

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


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

“background”(背景)

“repeat”(繰り返し)

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

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

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

background-repeatのセレクタ

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

つまり、背景画像のくりかえしは

body⇒サイト全体

h1⇒見出し

table⇒表

tr⇒表の行

div⇒ブロックレベル要素

span⇒インライン要素

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

background-repeatの値

background-repeatプロパティのとき、値には以下の6つを書くことができます。

  • repeat(初期値:くりかえす)
  • repeat-x(横方向にくりかえす)
  • repeat-y(縦方向にくりかえす)
  • no-repeat(くりかえしなし)
  • space
  • round

それぞれ例を出しながら説明していきます。

以下のHTMLファイルでCSSファイル(sample.css)を読み込んでいます。

そして今回は、webサイトの背景にこちらの水玉の画像(200px×200px)を表示させます。

webサイト全体の背景に画像を設定する場合、セレクタはbodyになります。

repeat(初期値:くりかえす)

repeatは、background-repeatプロパティの初期値です。

初期値なので、なにも書かなければこのrepeatを指定したことになります。

repeatが指定されると、画像は縦方向、横方向にくりかえされます。

※ブラウザ表示(クリックすれば拡大されます)
縦方向、横方向に画像が繰り返し表示されました。

ちなみに、画像の繰り返しは、ブラウザの左上から始まります。

そのため、右側、下側に表示される画像は、切り取られていることに留意しましょう。

repeat-x(横方向にくりかえす)

値をrepeat-xにすると、横方向にのみ画像がくりかえされます。

※ブラウザ表示(クリックすれば拡大されます)


横方向にのみ画像がくりかえされています。
そして、画像のくりかえしは左上から始まります。
そのため、右側に表示される画像は切り取られてしまうことに留意しましょう。

repeat-y(縦方向にくりかえす)

値をrepeat-yにすると縦方向にのみ画像がくりかえされます。

※ブラウザ表示(クリックすれば拡大されます)

縦方向にのみ画像がくりかえされています。

そして、画像のくりかえしは左上から始まります。

そのため、下側に表示される画像は切り取られてしまうことに留意しましょう。

space

値をspaceにすると、repeat、repeat-x、repeat-yと違って画像が切り取られることはありません。

切り取られないように画像と画像の間にスペースができるからです。

5行目のコードは、spaceをうまく挙動させるためにbodyの表示領域をwebサイト全体にしています。
※ブラウザ表示(クリックすれば拡大されます)

スペースができたことで画像が切り取られていないことがわかります。
spaceの挙動はウィンドウサイズを変えていくと理解できます。

ウィンドウサイズを少しずつ大きくしていきます。
ある時点までは、スペースが等間隔に広がっていきます。

ある時点をこえると、画像が増えます。

縦方向でも同じです。

ある時点をこえると、画像が増えました。

もう少し詳しく説明すると、スペースの合計が、画像のサイズ(今回は200px)をこえると画像が増えます。

round

roundもspaceと同じで画像が切り取られません。
切り取られないように画像が伸びたり縮んだりするためです。

5行目のコードは、roundをうまく挙動させるためにbodyの表示領域をwebサイト全体にしています。
※ブラウザ表示(クリックすれば拡大されます)

このブラウザ表示ではわかりにくいと思います。
理解するために、ウィンドウサイズを変えてみましょう。


横方向にウィンドウを広げていきます。

spaceのときはスペースが等間隔にできましたが、roundの場合は、水玉が伸びていきます。
さらにウィンドウを広げていきます。

水玉が追加されました。
表示されている水玉は通常サイズより縮んでいます。
縦方向も挙動は同じです。

ウィンドウが広がると、水玉が伸びます。
さらにウィンドウを広げていくと水玉が追加されます。
追加されたときの水玉は、通常サイズより縮んでいます。

spaceもroundも画像は切り取られません。

ちがいは、

spaceは、余白によって画像が均等に並び、

roundは、伸縮することで画像が均等に並びます。

no-repeat

no-repeatは、繰り返しが画像を表示しません。

※ブラウザ表示(クリックすれば拡大されます)


1つだけの画像の表示になりました。
左上を基準として画像が表示されていることに留意しましょう。

まとめ

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

  • 画像の繰り返しの設定はCSSを使う
  • プロパティはbackground-repeat
  • セレクタはすべての要素を書くことができる
  • 値はrepeat、repeat-x、repeat-y、space、round、no-repeat
  • 表示の基準点は左上

以上になります。

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

スポンサーリンク

おすすめ記事

フォローする