目的
- HTMLファイルの要素に背景画像を設定する方法をまとめる。
押さえるポイント
- 背景画像を設定したい要素に対してCSSでbackground-imageプロパティで画像を設定する。
- 画像サイズと画面サイズが一致していないと表示が乱れてしまう。(画面サイズ>画像サイズとなると画面サイズを埋めるように設定した背景画像が繰り返し表示されてしまう。)
- 表示画面全体を覆うように表示させたい場合はCSS でbackground-sizeプロパティでcoverを指定することにより繰り返し表示を防ぐことができる。
- 基本的にbackground-imageプロパティと一緒にbackground-sizeプロパティも指定することがセオリー
書き方の例
- 下記にCSSファイルの内容を記載する。
※要素の名前かクラス名は実際に背景画像を入れた要素の名前かクラス名を記入する。
※背景画像のURL(ファイルパス)はurlの文字に続き括弧の中に記載する。
要素の名前かクラス名 {
background-image: url(画像のURLがパス記入);
background-size: cover;
}
より具体的な例
- h1要素にweb画像を背景として設定する。
画像はいたすとやのhttps://www.irasutoya.com/2017/03/blog-post_74.htmlとする - p要素にローカル環境にある画像を背景として設定する。
ローカル環境の画像ファイル名は「teat.JPEG」とする。
ローカル環境の画像ファイルとHTMLファイルとの階層関係を下記に記載する。
# HTMLファイルとローカル画像ファイルのフォルダ階層関係
HTMLファイル
photoフォルダ
↪︎test.JPEG
- 下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
<p>これは日本の朝の挨拶です</p>
- 下記にCSSファイルの内容を記載する。
h1 {
background-image: url(https://www.irasutoya.com/2017/03/blog-post_74.html);
background-size: cover;
}
p {
background-image: url(./photo/test.JPEG);
background-size: cover;
}