#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background-size

background-size

背景画像のサイズを指定

background-sizeプロパティは、背景画像の表示サイズを指定します。
表示領域のサイズに合わせて背景画像が引き伸ばされたり、収まるように縮小されたりします。
画像は指定の比率を維持したまま拡大・縮小するので、レスポンシブなサイトの制作に役立ちます。

長さやパーセンテージで指定する場合、1つだけの指定では横方向に適用され、もう1つはautoと解釈されます。
2つの場合 1つ目の値が横方向(幅)、2つ目の値が縦方向(高さ)を指定、負の値を指定することはできません。

background-size: auto; /* 画像サイズは自動算出されるため、基本そのままのサイズ(初期値) */
background-size: contain; /* 縦横比は保持し、背景領域に収まる最大サイズになるように背景画像を拡大縮小 */
background-size: cover; /* 縦横比は保持し、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小 */
background-size: <length>長さ; /* 背景画像の幅・高さを指定したサイズで表示(負の値は不可) */
background-size: <percentage>パーセンテージ; /* 背景画像の幅・高さを指定した%(パーセント)で表示 */

background-size の使用例

rose-sm.jpg ← 使用する画像はこちら。w150px h100px 表示位置が分かり易いよう見本を表示するBoxに背景色(#e2eccb;)を付けています。
背景画像のサイズを調整するプロパティは、背景(background)に
background-size: サイズの値; を使います。
background-size: auto;
縦横比:画像サイズは自動算出されるため、基本そのままのサイズです。
background-size :auto; 縦横比:画像サイズは自動算出されるため、基本そのままのサイズです。
background-size: contain;
縦横比:そのまま 表示領域に対して、元画像が全て収まるように調整されます。
background-size: contain; 縦横比:そのまま 表示領域に対して、元画像が全て収まるように調整されます。
background-size: cover;
縦横比:そのまま 表示領域一杯に覆うサイズにして、表示領域をはみ出した部分は表示されません。
background-size: cover; 縦横比:そのまま 表示領域一杯に覆うサイズにして、表示領域をはみ出した部分は表示されません。
background-size: 値指定;
縦横:指定したサイズ(数値+単位)で大きさを調整、2つの場合は幅・高さの順に半角スペースを開けて記述します。
background-size: px; 縦横:指定したサイズ(px)で大きさを調整します。(見本は120px×120px)
background-size: %;
縦横:表示領域に対して指定した割合で表示、2つの場合は幅・高さの順に半角スペースを開けて記述します。
background-size: %; 縦横:表示領域に対して指定した割合で表示します。(見本は50%×50%) Boxのサイズが200px×150pxなので、 背景画像は表示領域の50%である100px×75pxで表示されます。

参照:MDN web docs -background-size

background-sizeをショートハンドで指定する

background のプロパティをショートハンドで複数指定する場合、background-size は background-positionの後に「/」で区切って指定します。

/* NG */
  background: url("背景画像のURL") center center cover no-repeat fixed;

/* OK */
  background: url("背景画像のURL") center center /cover no-repeat fixed;

参照:MDN web docs -background