HTML&CSSシェアするLINE!こんにちは、@AWAKOJIです。今日も、薬剤師をしながらプログラミングの勉強をしています。この記事では、webサイトの背景に画像を表示する方法を解説します。解説のあとで、実際webサイトに画像を表示させてみます。背景に上手に画像を表示できると、サイトののオリジナリティを高めることができるので、ぜひ出来るようになっておきましょう。【実例】サイトの背景に画像を表示するまとめ使用する言語はCSS背景に画像を設定するためにCSSを使います。CSSとは、webサイトのデザインを担当する言語です。CSSについてはこちらの記事をどうぞ。こんにちは、AWAKOJIです。今日も薬剤師をしながらプログラミングの勉...positivelifeshow.com使用するプロパティはbackground-imageCSSの基本構造は以下の通りです。セレクタには、表示する場所プロパティには、表示するもの値には、表示する内容を書きます。今回、背景画像を設定するため、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か月前の僕に向けて書いた内容です。よかったらご覧ください。...positivelifeshow.com【実例】サイトの背景に画像を表示するでは、実際にwebサイトの背景に画像を設定してみます。今回はこの画像を表示したいと思います。※ちなみに僕が書いた娘と息子の顔です。下手くそですみません。動画まず動画で解説してみました。よかったらご覧ください。HTMLの書き方HTMLの書き方で特別なことはありません。スタイルシートが読み込まれていることを確認してください。<p>ここに画像が表示されます。href="./sample.css"></head><body><p>サンプルです。</p><p>ここに画像が表示されます。</p></body></html>CSSの書き方background-imageプロパティを使います。サイト全体に背景画像を設定するのでセレクタはbodyとなります。値は、相対パスで書いています。{background-image:url(./sample.png);}結果表示ブラウザで確認してみます。※クリックすれば拡大表示されます。表示すると聞くと、画像を一つだけの表示だと想像しますね。今回は、画像が何個も表示されています。これは、背景画像の繰り返しについてのプロパティであるbackground-repeatが関与します。このプロパティの初期値はrepeatです。そのためbackground-repeatを設定していないと画像が繰り返し表示されてしまうのです。background-repeatプロパティについては次の記事を参考にしてください。まとめ以上、background-imageについてまとめます。背景画像の設定にはCSSを使うプロパティはbackground-imageセレクタはすべての要素を書くことができる値は絶対パスか相対パスbackground-repeatプロパティを設定しないと繰り返し表示される以上です。