Различия

Показаны различия между двумя версиями страницы.

--- background-size [2023/09/25 18:12]
tro создано
+++ background-size [2023/09/25 18:15] (текущий)
tro
@@ Строка 10: / Строка 10: @@
 /* Ширина 200px, висота 300px */
 background-size: 200px 300px;
+</code>
+. Значення **cover**:
+  * Гарантовано зберігає пропорції зображення.
+  * Зображенню задані мінімальні розміри, за яких воно заповнить фон всього елемента.
+  * Якщо пропорції зображення та елемента різні, частина зображення по вертикалі або горизонталі візуально обрізається.
+. Значення **contain**:
+  * Гарантовано зберігає пропорції зображення.
+  * Зображенню задані максимально можливі розміри, за яких воно повністю поміщається в елемент.
+  * Зображення може не закрити весь фон елемента по вертикалі або горизонталі, якщо пропорції блоку та зображення не збігаються.
+<code>
+.hero {
+  background-color: #2a2a2a;
+  background-image: url(шлях до зображення);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
 </code>