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


こんにちは、@AWAKOJIです。

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

この記事では、webサイトの背景に画像を表示する方法を解説します。

そして、解説のあとで、実際webサイトに画像を表示させてみます。

背景に上手に画像を表示できると、サイトののオリジナリティを高めることができるので、ぜひ出来るようになっておきましょう。

スポンサーリンク

使用する言語はCSS

背景に画像を設定するためにCSSを使います。

CSSとは、webサイトのデザインを担当する言語です。

CSSについてはこちらの記事をどうぞ。

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

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

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

セレクタには、表示する場所

プロパティには、表示するもの

値には、表示する内容

を書きます。

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

“background”(背景)

“image(画像)

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

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

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

background-imageのセレクタ

セレクタには、画像を表示させたい場所の要素を書きます。
background-imageプロパティの場合、セレクタにはすべての要素を書くことができます。
つまり、

body⇒サイト全体に背景画像

h1⇒見出しに背景画像

table⇒表に背景画像

tr⇒表の行ごとに背景画像

div⇒ブロックレベル要素に背景画像

span⇒インライン要素に背景画像

という感じにすべてに場所に背景画像を設定できるわけです。

background-imageの値

background-imageの値には、表示させたい画像のパスを書きます。

パスは、絶対パスでも相対パスでもどちらでも構いません。

※相対パスを書くときは、スタイルシートを基準としたパスを書きます。HTMLファイルが基準ではないので注意が必要です。

パスについてはこちらの記事にまとめたのでよくわからない人はご覧ください。

【HTML&CSS】絶対パスと相対パスの違いと書き方
こんにちは、@AWAKOJIです。 この記事では、絶対パスと相対パスの違いと書き方について簡単にわかりやすく説明しました。 プログラミング初心者の僕が3か月前の僕に向けて書いた内容です。 もしよかったらご覧ください。 パ...

【実例】サイトの背景に画像を表示する

では、実際にwebサイトの背景に画像を設定してみます。
今回はこの画像を表示したいと思います。

※ちなみに僕が書いた娘と息子の顔です。下手くそですみません。

動画

まず動画で解説してみました。

よかったらご覧ください。

HTMLの書き方

HTMLの書き方で特別なことはありません。
スタイルシートが読み込まれていることを確認してください。

CSSの書き方

background-imageプロパティを使います。

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

値は、相対パスで書いています。

結果表示

ブラウザで確認してみます。

※クリックすれば拡大表示されます。


うまく表示されていますね。

注意点

背景画像を表示すると聞くと、画像を一つだけの表示だと想像しますね。

しかし今回は、画像が何個も表示されています。

これは、背景画像の繰り返しについてのプロパティであるbackground-repeatが関与します。

このプロパティの初期値はrepeatです。

そのためbackground-repeatを設定していないと画像が繰り返し表示されてしまうのです。

background-repeatプロパティについては次の記事を参考にしてください。

まとめ

以上、background-imageについてまとめます。

  • 背景画像の設定にはCSSを使う
  • プロパティはbackground-image
  • セレクタはすべての要素を書くことができる
  • 値は絶対パスか相対パス
  • background-repeatプロパティを設定しないと繰り返し表示される

以上です。

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

スポンサーリンク

おすすめ記事

フォローする