対象者
①画像の背景設定をしたい方
②画像のサイズ変更をしたい方
手順目次
1.background-imageプロパティで背景画像指定
2.background-sizeで画像の大きさを変更
3.background-positionで背景画像の位置を調整
実際の手順と実例
1.background-imageプロパティで背景画像指定
必ず画像専用フォルダを準備して、そのフォルダ内に画像をダウンロードしておく!!
実際に使うプロパティは以下の通り
セレクタ {
background-image: url(画像のパス);
}
実例を上げると
index.html
<div class = "main-visual">
<img src="mv.png" alt="#">
</div>
style.css
.main-visual {
width: 100%;
height: 650px;
ここに追加！
background-image: url(img/mv.png)
}
2.background-sizeで画像の大きさを変更
値、画像幅、画像の高さをそれぞれ指定する
セレクタ {
background-size: 値;
background-size: 画像の幅 画像の高さ;
}
実際には
.main-visual {
width: 100%;
height: 650px;
background-image: url(img/mv.png);
background-size: cover;
}
値だけでもOK！全体を覆うサイズで伸縮させる
【おまけ：その他の使用例まとめ】
セレクタ {
/* 元画像のサイズを維持したまま、自動的に表示される 初期値 */
background-size: auto;
/* 画像の縦横比を維持したまま、領域全体を埋め尽くすまで伸縮される（画像全体が表示される） */
background-size: contain;
/* 画像の縦横比を維持したまま、領域全体をおおうサイズで伸縮される（画像の表示されない部分も発生） */
background-size: cover;
/* 表示領域の幅100％ 高さ100％で表示（縦横比は無視） */
background-size: 100% 100%;
/* pxを指定して表示 */
background-size: 24px auto;
}
3.background-positionで背景画像の位置を調整
セレクタ {
background-position: 値;
background-position: 値 値;
}
値には
top
right
bottom
left
center
この他にもpxや％指定も可能です！
実際に例を用いてコードを記述すると、
.main-visual {
width: 100%; /* 横幅いっぱい */
height: 650px;
background-image: url(img/mv.png);
background-size: cover;
background-position: center;
}
上記の３つで自在に背景画像を動かすことができます！
↧