【CSS】 background-imageを学び背景画像を指定しよう！

シュウ

今回は「【CSS】 background-imageを学び背景画像を指定しよう！」
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
background-imageの使い方について学びたい方へ
絶対パス、相対パスでの指定方法について解説しております

上の図のように、背景画像を指定できます。
背景画像の上には文字やボタン要素なども配置も可能になります。指定方法もとても簡単です。

主なbackgroundプロパティ

background-color　
解説の記事ありますよ
指定した要素の背景の色を指定します
background-image　
今回はここを解説！
指定した要素の背景画像を指定します
background-repeat　
解説の記事ありますよ
背景画像の繰り返しを指定します
background-position　
解説の記事ありますよ
背景画像の位置を指定します
background-size　
解説の記事ありますよ
背景画像のサイズを指定します

[記事の内容]

background-imageについて

基本的な記述方法としては
background-imageurlの指定方法になります。

指定できる値

none
初期値になります。noneとは非表示を意味するため背景画像は表示しません
相対パス、または絶対パス
urlの後に相対パス、または絶対パスを指定することにより背景画像を表示させます

background-image指定方法について

background-imageは下記のように指定します。

セレクタ {
	background-image: url(画像のパス);
}

noneについて

none
初期値になります、noneとは非表示を意味するため背景画像は表示しません

none

none:
背景画像は表示しません

<div class="inner">
	<div class="box">none:背景画像は表示しません</div>
</div>

.inner {
	color: #fff;
	background-color: #7FFF00;　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 80px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-image: none; 　　　/* 背景画像の指定 */
}

相対パスについて

url(sample.jpg)
urlの後に相対パスを指定することにより背景画像を表示させます

相対パス：パターン０１について

<div class="inner">
	<div class="box">相対パス：パターン０１について</div>
</div>

.inner {
	color: #fff;
	background-color: #7FFF00;　　　　　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 80px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-image: url(sample.jpg);　/* 背景画像の指定 */
    background-size: cover;　　　　　　　 /* 背景画像のサイズ指定 */
    background-repeat: no-repeat; 　　　 /* 背景画像の繰り返し指定 */
}

パターン1：ファイルからみて同じ階層にあるファイルを指定したい場合は「./」の後に続けて
ファイル名(sample.jpg)を記述します、「./」は現在の階層を表します。
「./」は省略しファイル名だけでも大丈夫です。

相対パス：パターン02について

<div class="inner">
	<div class="box">相対パス：パターン02について</div>
</div>

.inner {
	color: #fff;
	background-color: #7FFF00;　　　　　　　　　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 80px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-image: url(images/sample.jpg);　/* 背景画像の指定 */
    background-size: cover;　　　　　　　 　　　　/* 背景画像のサイズ指定 */
    background-repeat: no-repeat; 　　　　　　　 /* 背景画像の繰り返し指定 */
}

パターン2：ファイルからみて「images」フォルダの中にファイル名(sample.jpg)を入れております。
フォルダの区切りを表す記号は「/」(スラッシュ)になります。
「./」は省略しファイル名だけでも大丈夫です。

絶対パスについて

url(http〜ファイル名)
urlの後に絶対パスを指定することにより背景画像を表示させます

絶対パス

<div class="inner">
	<div class="box">絶対パスについて</div>
</div>

.inner {
	color: #fff;
	background-color: #7FFF00;　　　　　　　　　　　　/* 親要素の背景色を指定 */
	padding: 20px;
}
.box {
	width: 80%;
	padding: 80px 0px;
	text-align: center;
	margin: 0 auto;
	border: solid 2px #ffffff;
	background-image: url(ドメインURL/sample.jpg);　/* 背景画像の指定 */
    background-size: cover;　　　　　　　 　　　　　 /* 背景画像のサイズ指定 */
    background-repeat: no-repeat; 　　　　　　　　　/* 背景画像の繰り返し指定 */
}

絶対パスでの注意！
ドメインを変更(サイトのお引越し)をしたら、画像パスもすべて変更しないといけません。
絶対パスで指定する際には注意が必要です。

CSSプロパティ参考になるかも