background-size [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== background-size ======
дозволяє коригувати розміри зображення шляхом налаштування необхідної ширини та висоти. Якщо не вказати висоту, вона буде розрахована автоматично зі збереженням пропорцій.
<code>
/* Вихідні розміри зображення, значення за замовчуванням */
background-size: auto auto;

/* Ширина 200px, висота буде пропорційна */
background-size: 200px;

/* Ширина 200px, висота 300px */
background-size: 200px 300px;
</code>

1. Значення **cover**:

  * Гарантовано зберігає пропорції зображення.
  * Зображенню задані мінімальні розміри, за яких воно заповнить фон всього елемента.
  * Якщо пропорції зображення та елемента різні, частина зображення по вертикалі або горизонталі візуально обрізається.


2. Значення **contain**:

  * Гарантовано зберігає пропорції зображення.
  * Зображенню задані максимально можливі розміри, за яких воно повністю поміщається в елемент.
  * Зображення може не закрити весь фон елемента по вертикалі або горизонталі, якщо пропорції блоку та зображення не збігаються.

<code>
.hero {
  background-color: #2a2a2a;
  background-image: url(шлях до зображення);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</code>