<p>Цей приклад показує як працює властивість <strong>background-size</strong>. Спробуйте ввімкнуити різні перемикачі, щоб змінити відображення фонового зображення нище.</p>

<div class="inputs">
  <input id="auto" checked name="background-size" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Без задання. Тло матиме натуральний розмір, такий, як у оригінальної картинки. Пропорції теж будуть ідентичними оригінальному зображенню.</message>
  
  <input id="contain" name="background-size" type="radio"/>
  <label for="contain">contain</label>
  <message for="contain">Масштабує картинку так, щоб вона накрила собою весь блок зі збереженням пропорцій, так, щоб його ширина та висота дорівнювала ширині та висоті блок.</message>
  
  <input id="cover" name="background-size" type="radio"/>
  <label for="cover">cover</label>
  <message for="cover">Масштабує картинку так, щоб вона цілком помістилася в блок із збереженням пропорцій. При цьому вона може зайняти або всю ширину, або всю висоту (залежить від пропорцій картинки і від розмірів елемента).</message>
 
</div>

<div class="m-box">
  <p id="message">Без задання. Тло матиме натуральний розмір, такий, як у оригінальної картинки. Пропорції теж будуть ідентичними оригінальному зображенню.</p>
</div>

<div id="block"></div>

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

message {
  display: none;
}

#block {
  width: 400px;
  height: 400px;
  margin: 36px auto;
  background-image: url(https://lorempixel.com/600/200/);
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-size: auto;
  padding: 16px;
  border: 4px solid #4f4f4f;
}

.m-box {
  min-height: 100px;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('background-size', $(this).attr('id'));
  
});