CSS3 background-size

Использование CSS3 background-size для масштабирования размера фонового изображения. Установите фиксированный размер или настройте его ширину и / или высоту, а также учитывайте соотношение сторон, используя ключевое слово auto. https://robertnyman.com/css3/background-size/background-size.html

by akogch

HTML

<div class="background-size"></div>
<div class="background-size-stretch"></div>
<div class="background-size-cover"></div>

CSS

.background-size {
  width: 100px;
  height: 100px;
  color: #fff;
  background-image: url(https://image.prntscr.com/image/ALQV7IljTDKE0txOY7BqrQ.jpg);
	background-repeat: no-repeat;
  border: 1px solid #000;
  margin-bottom: 20px;
  padding: 10px;
  background-size: 100px 50px;
}

.background-size-stretch {
  width: 310px;
  height: 200px;
  color: #fff;
  background: url(https://image.prntscr.com/image/ALQV7IljTDKE0txOY7BqrQ.jpg)
    no-repeat;
  border: 1px solid #000;
  margin-bottom: 20px;
  padding: 10px;
  background-size: auto 100%;
}

.background-size-cover {
  width: 200px;
  height: 400px;
  color: #fff;
  background: url(https://image.prntscr.com/image/ALQV7IljTDKE0txOY7BqrQ.jpg)
    no-repeat;
  border: 1px solid #000;
  margin-bottom: 20px;
  padding: 10px;
  background-size: cover;
}