SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.21
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【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の後に相対パスを指定することにより背景画像を表示させます

相対パスについて

相対パス:パターン01について

<div class="inner">
	<div class="box">相対パス:パターン01について</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プロパティ参考になるかも

基本的な記述方法や透過について解説しております。

repeat-x、repeat-yでの指定方法について解説しております。

水平方向、垂直方向での指定方法について解説しております。

auto、contain、coverなどの指定について解説しております。

まとめ

今回はこれで以上です。

POINT
  • 相対パス、または絶対パスで背景画像を指定します
  • 相対パスで指定する際には「./」省略しても問題ありません
  • 絶対パスでの注意点はドメインを変更(サイトのお引越し)をしたら、画像パスもすべて変更しないといけませんので必要です
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top