今回は「【CSS】 background-imageを学び背景画像を指定しよう!」
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
background-image
の使い方について学びたい方へ - 絶対パス、相対パスでの指定方法について解説しております
上の図のように、背景画像を指定できます。
背景画像の上には文字やボタン要素なども配置も可能になります。指定方法もとても簡単です。
background-imageについて
基本的な記述方法としては
background-image
urlの指定方法になります。
background-image指定方法について
background-imageは下記のように指定します。
セレクタ {
background-image: url(画像のパス);
}
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">相対パス:パターン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)を記述します、「./」は現在の階層を表します。
「./」は省略しファイル名だけでも大丈夫です。
<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に関する様々な情報を発信しています。
最新記事
関連記事