【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

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。