background-image

background-imageは、HTMLの背景に画像を指定するCSSプロパティである。

概要

background-image: image

値

image
背景に使用する画像を指定します。
image
値 意味
none 画像なし（規定値）
url(URL) URLで指定した画像を表示
inherit 継承

body要素の背景画像を指定する例を以下に示す。

body {
  background-image: url(http://www.example.com/image/back.gif);
}

ローカルファイルのURLを指定する場合は、以下のように指定する。

body {
  background-image: url(file:///C:/image/back.gif);
}

初期値

none

適用先

全ての要素に対してbackground-imageプロパティを指定できる。

継承

background-imageプロパティは子孫の要素へ継承されない。

background-size

背景画像のサイズを指定する。

概要

background-size: contain
background-size: cover
background-size: width
background-size: width height

値

contain
背景画像を切り取ったり縦横比を崩したりすることなく、コンテナ内で可能な限り大きいサイズにする。コンテナが背景画像よりも大きい場合、background-repeat プロパティが no-repeat に設定されていない限り、背景画像がタイル状に配置される。 
body {
  background-image: url(http://www.example.com/image/back.gif);
  backgournd-size: contain;
}
cover
背景画像をコンテナいっぱいにできるだけ大きく拡大縮小し、必要に応じて画像を引き伸ばす。背景画像の比率が要素と異なる場合は、何もない空間が残らないように、上下または左右が切り取られる。 
body {
  background-image: url(http://www.example.com/image/back.gif);
  backgournd-size: cover;
}
width
背景画像の幅を指定する。

背景画像の幅を数値で指定する場合は、以下に示す単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100 
body {
  background-image: url(http://www.example.com/image/back.gif);
  backgournd-size: 50%;
}
height
背景画像の高さを指定する。背景画像の幅だけを指定して高さの指定を省略した場合、背景画像の高さは auto となる。

背景画像の高さを数値で指定する場合は、以下に示す単位を利用できる。

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント
vw viewport width ビューポートの幅の1/100
vmin minimum viewport ビューポートの幅または高さで小さい方の1/100
vmax maximum viewport ビューポートの幅または高さで大きい方の1/100 
body {
  background-image: url(http://www.example.com/image/back.gif);
  backgournd-size: auto 360px;
}

初期値

none

適用先

全ての要素に対して background-size プロパティを指定できる。

継承

background-size プロパティは子孫の要素へ継承されない。

関連記事

参考文献

World Wide Web Consortium (2023) CSS Backgrounds and Borders Module Level 3