【CSS】背景画像を要素のサイズに合わせる

2017年12月3日2019年6月12日CSS,CSSデザイン

CSSで指定した要素のサイズから背景画像をはみ出さない様にする
background-sizeを指定する

contain：縦横比保持、背景領域に収まる最大サイズになるように背景画像を拡大縮小
cover：縦横比保持、領域を完全に覆う最小サイズになるように背景画像を拡大縮小
px px;での指定も可能、autoも効く

.className{
  background-image:url(xxx.jpg);
  background-repeat: no-repeat;
  background-size:cover;
}

サンプル

<div="sample"></div>

指定なし

.sample{
  width:300px;
  height:300px;
  background-image:url(https://naruhodo.repop.jp/wp-content/uploads/2017/11/coffee-beans.jpg);
}

指定あり

.sample2{
  width:300px;
  height:300px;
  background-image:url(https://naruhodo.repop.jp/wp-content/uploads/2017/11/coffee-beans.jpg);
  background-repeat: no-repeat;
  background-size:cover;
}

背景画像を要素のサイズに合わせるサンプル

See the Pen Fit image to element size by yochans (@yochans) on CodePen.