SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.29
  • CATEGORY
TITLE

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

SHU[シュウ]

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

サーバーとドメインの同時取得で.jpが無料

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

こんな方に読んでほしい

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

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

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

background-sizeについて

background-sizeについて

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

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

background-size指定方法について

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プロパティ参考になるかも

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

repeat、repeat-x、repeat-yについて解説しております。

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

基本的な記述方法、相対パス、絶対パスについて解説しております。

まとめ

今回はこれで以上です。

POINT
  • background-sizeは指定した要素の背景画像のサイズを指定をします
  • background-positionで背景画像の位置を調整しましょう
  • pxや%で指定する際には縦横比には気をつけましょう
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top