【CSS】background-sizeを学び背景画像のサイズを指定しよう！

シュウ

今回は「background-sizeを学び背景画像のサイズを指定しよう！」
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
background-sizeの使い方について学びたい方へ
背景画像のサイズ指定について解説をしております

上の図のように、背景画像を表示させた際にブラウザいっぱいに表示させたいときはありませんか？
そん際にはbackground-sizeプロパティを使用します！指定方法もとても簡単です

主なbackgroundプロパティ

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

[記事の内容]

background-sizeについて

基本的な記述方法としては
background-size値になります。

指定できる値

auto(初期値)
背景画像の表示サイズは変更されません
contain
背景画像の縦横比を保ち、指定要素に収まるようサイズを調整します
cover
背景画像の縦横比を保ち、指定要素のすべてをカバーするようサイズを調整します
%または数値+単位の指定
背景画像のサイズを横(幅)サイズ、縦(高さ)サイズとスペースで区切って指定します

background-size指定方法について

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

セレクタ {
	background-size: 値;
}

セレクタ {
	background-size: 横(幅)サイズ 縦(高さ)サイズ;
}

ただし、background-sizeプロパティだけでは使用しません。
背景画像を指定する「background-image」などと一緒に使用します。

auto(初期値)について

background-size: auto
背景画像の表示サイズは変更されません

画像サイズ 480×320

auto指定について

<div class="inner">
	<div class="box">auto(初期値)について</div>
</div>

.inner {
 width: 80%;
 height: 240px;
 margin: 0 auto;
 line-height: 240px;
}
.box {
 background-image: url(画像のパス); 　/* 背景画像の指定 */
 background-size: auto;　 　　　　　　/*　背景画像のサイズの指定 */
 background-repeat: no-repeat;　　  /*　背景画像の繰り返しの指定 */
}

containについて

background-size: contain
背景画像の縦横比を保ち、指定要素に収まるようサイズを調整します

画像サイズ 480×320

contain指定について

<div class="inner">
	<div class="box">containについて</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
	background-size: contain;　 　　　　/*　背景画像のサイズの指定 */
    background-repeat: no-repeat;　　  /*　背景画像の繰り返しの指定 */
}

coverについて

background-size: cover
背景画像の縦横比を保ち、指定要素のすべてをカバーするようサイズを調整します

画像サイズ 480×320

cover指定について

<div class="inner">
	<div class="box">coverについて</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
	background-size: cover;　 　　　　  /*　背景画像のサイズの指定 */
    background-repeat: no-repeat;　　  /*　背景画像の繰り返しの指定 */
}

pxについて

background-size: 横px 縦px
背景画像のサイズを横(幅)サイズ、縦(高さ)サイズとスペースで区切って指定します

画像サイズ 480×320

px指定について

<div class="inner">
	<div class="box">px指定について</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
	background-size: 200px 200px;　 　　/*　背景画像のサイズの指定 */
    background-repeat: no-repeat;　　  /*　背景画像の繰り返しの指定 */
}

注意！
数値+単位で指定する際には縦横比は必ず守りましょう！画像が潰れてしまいます。
例) ①画像サイズ 480×320 = 3:2の割合 ②画像サイズ 480×360 = 4:3の割合

画像サイズ 480×320

px指定について(片方をauto)

<div class="inner">
	<div class="box">px指定について(片方をauto)</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
	background-size: 200px auto;　 　　 /*　背景画像のサイズの指定 */
    background-repeat: no-repeat;　　  /*　背景画像の繰り返しの指定 */
}

ポイント！
縦横比を維持した場合は片方を数値にしもう片方をautoにすることで自動的に比率を保持してくれます。

%について

background-size: 横% 縦%
背景画像のサイズを横(幅)サイズ、縦(高さ)サイズとスペースで区切って指定します
pxと同様に同じ指定方法になります。

画像サイズ 480×320

%指定について

<div class="inner">
	<div class="box">%指定について</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス); 　/* 背景画像の指定 */
	background-size: 60% auto;　 　　  /*　背景画像のサイズの指定 */
    background-repeat: no-repeat;　　  /*　背景画像の繰り返しの指定 */
}

背景画像に位置との組み合わせについて

coverを使用した場合、領域内に背景画像が入らず表示されない箇所がでてきます。
その際はbackground-positionを使用し背景画像の表示位置を変更しましょう。
使用する画像

画像サイズ 480×320

right bottom

<div class="inner">
	<div class="box">right bottom</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);　　/* 背景画像の指定 */
	background-size: cover;　　　　　　　 /* 背景画像のサイズの指定 */
	background-position: right bottom;　/* 背景画像の位置の指定 */
    background-repeat: no-repeat;　　　　/* 背景画像の繰り返しの指定 */
}

画像サイズ 480×320

center center

<div class="inner">
	<div class="box">center center</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background-image: url(画像のパス);　　 /* 背景画像の指定 */
	background-size: cover;　　　　　　　  /* 背景画像のサイズの指定 */
	background-position: center center;　/* 背景画像の位置の指定 */
    background-repeat: no-repeat;　　　　 /* 背景画像の繰り返しの指定 */
}

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