HTMLに挿入した背景画像を繰り返さない方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLに挿入した背景画像を繰り返さない方法について解説しています。background-imageによる背景画像の設定について初期の値がどうなっているか、繰り返さない場合の書き方を学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLに挿入した背景画像を繰り返さない方法について解説します。

また、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

挿入した背景画像を繰り返さない方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

背景画像のサイズと表示される幅の関係

背景画像は、表示させる要素の左上端をx, y座標の0, 0と位置付けて表示します。最初の準備として、下記のサンプルコードを記述します。このコードでは、赤枠の内側左上端がx, y座標の0, 0になります。

HTML

<header></header>

CSS

header {

  border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */

  height: 500px; /* 要素の内部が空なので、高さを固定します。 */

}

次に背景画像を絶対パスで読み込ませます。

CSS

header {

  border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */

  height: 500px; /* 要素の内部が空なので、高さを固定します。 */

  background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg");

}

背景画像のサイズより、表示領域のサイズが大きい場合には、表示領域の余りの面積に繰り返しで背景画像が表示されます。

この現象となる理由は、標準的な初期値として、以下の設定が付与されるためです。

CSS

header {

  border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */

  height: 500px; /* 要素の内部が空なので、高さを固定します。 */

  background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg");
  background-repeat: repeat; /* 背景画像を繰り返し表示します。 */

}

 

画像を繰り返さないためには

初期値として、画像を繰り返し表示する設定になっているため、background-repeatの値をno-repeatに定義する一回だけの表示にできます。

以下、背景で画像を繰り返さないためのコード例です。

CSS

header {

  border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */

  height: 500px; /* 要素の内部が空なので、高さを固定します。 */

  background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg");
  background-repeat: no-repeat; /* 背景画像を繰り返し表示しません。 */

}

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

縦横方向に繰り返さない方法

前述の方法を活用し、

  • 背景画像を縦方向に繰り返し表示させず、横方向に繰り返し表示させる
  • 背景画像を横方向に繰り返し表示させず、縦方向に繰り返し表示させる

場合もあります。

この設定は指定方向にだけ繰り返し表示するコードを使用します。

 

以下、縦方向に繰り返し表示させず、横方向に繰り返し表示させるコード例です。

CSS

header {

  border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */

  height: 500px; /* 要素の内部が空なので、高さを固定します。 */

  background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg");

  background-size: 100px 100px; /* 背景画像のサイズを調整のため正方形に整形します。 */
  background-repeat: repeat-x; /* 背景画像を横方向のみ繰り返し表示します。 */

}

以下は、背景画像を横方向に繰り返し表示させず、縦方向に繰り返し表示させるコード例です。

CSS

header {

  border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */

  height: 500px; /* 要素の内部が空なので、高さを固定します。 */

  background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg");

  background-size: 100px 100px; /* 背景画像のサイズを調整のため正方形に整形します。 */
  background-repeat: repeat-y; /* 背景画像を縦方向のみ繰り返し表示します。 */

}

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLに挿入した背景画像を繰り返さない方法がよくわかったので良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。