<html>
  <head>
    <title>CSS background-size</title>
  </head>
  <body>
    <div class="page">
      <div class="example-item example-item--1"> 
        <p class="example-item__text">Пример настройки размеров фонового изображения с помощью фиксированных значений (<a href="https://tuhub.ru/refs/css/length" target="_blank">&lt;length&gt;</a>) в свойстве <code>background-size</code>:</p>
        <div class="example-item__content example-item__content--bg-length"></div>
      </div>
      <div class="example-item example-item--2"> 
        <p class="example-item__text">Пример настройки размеров фонового изображения с помощью процентных значений (<a href="https://tuhub.ru/refs/css/percentage" target="_blank">&lt;percentage&gt;</a>) в свойстве <code>background-size</code>:</p>
        <div class="example-item__content example-item__content--bg-percent"></div>
      </div>
      <div class="example-item example-item--3"> 
        <p class="example-item__text">Пример использования ключевого слова <code>contain</code> для  в свойстве <code>background-size</code>:</p>
        <div class="example-item__content example-item__content--bg-contain"></div>
      </div>
      <div class="example-item example-item--4"> 
        <p class="example-item__text">Пример использования ключевого слова <code>cover</code> для  в свойстве <code>background-size</code>:</p>
        <div class="example-item__content example-item__content--bg-cover"></div>
      </div>
      <div class="example-item example-item--5"> 
        <p class="example-item__text">Пример использования ключевого слова <code>auto</code> для  в свойстве <code>background-size</code>:</p>
        <div class="example-item__content example-item__content--bg-auto"></div>
      </div>  
      <div class="page__copyright">
         Пример использования свойства <a class="page__copyright-link" href="https://tuhub.ru/refs/css/background-size" target="blank">background-size в CSS</a>
      </div>
    </div>
  </body>
</html>
.example-item__content--bg-length {
  background-image: url(https://tuhub.ru//themes/custom/tuhub/dist/images/social.png);
  background-size: 360px 190px;
  background-repeat: no-repeat;
  height: 340px; 
}

.example-item__content--bg-percent {
  background-image: url(https://tuhub.ru//themes/custom/tuhub/dist/images/social.png);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height: 340px; 
}

.example-item__content--bg-contain {
  background-image: url(https://tuhub.ru//themes/custom/tuhub/dist/images/social.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 340px; 
}

.example-item__content--bg-cover {
  background-image: url(https://tuhub.ru//themes/custom/tuhub/dist/images/social.png);
  background-size: cover;
  background-repeat: cover;
  height: 340px; 
}

.example-item__content--bg-auto {
  background-image: url(https://tuhub.ru//themes/custom/tuhub/dist/images/social.png);
  background-size: auto;
  background-repeat: no-repeat;
  height: 340px; 
}

External CSS

  1. https://tuhub.ru/themes/custom/tuhub/dist/css/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.