Кратко
СкопированоСвойство background
позволяет изменять размер фонового изображения. Если фоновая картинка не совпадает по размеру с размерами блока, то при помощи этого свойства можно сделать так, чтобы она, картинка занимала всю площадь блока или, наоборот, была определённого размера.
Пример
СкопированоСоздадим блок и в качестве фона зададим ему красивую панораму:
![Фон с красивой панорамой](images/landscape-300w.jpeg)
<div class="element"></div>
<div class="element"></div>
.element { height: 100vh; background-color: #f1f1f1; background-image: url("landscape.jpg"); background-repeat: no-repeat;}
.element { height: 100vh; background-color: #f1f1f1; background-image: url("landscape.jpg"); background-repeat: no-repeat; }
Если не указывать свойство background
, то будет видна только небольшая часть картинки. Но хотелось бы, чтобы фон, несмотря на его нестандартный размер, смотрелся хорошо.
Укажем свойство background
со значением 100
. По логике с таким значением фон должен занимать 100% высоты элемента и 100% ширины элемента.
Если у вас широкий монитор, то можно и не заметить подвоха, но на узких мониторах картинка будет деформироваться и сплющиваться по ширине.
Есть способ заставить картинку занять всю доступную площадь и при этом не деформироваться. Зададим background
— cover переводится с английского как «обложка».
В этой версии ещё добавлено свойство background
со значением center
, чтобы в области видимости был центр изображения.
Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто обрезается. Именно значение cover
используется чаще всего для создания красивых фонов.
![Примеры background-size](images/contain-and-cover-300w.png)
Как понять
СкопированоСвойство background
управляет размерами картинки внутри элемента, для которого эта картинка задана фоном.
Как пишется
СкопированоВ качестве значения для свойства background
можно задавать:
- Точный размер в любых единицах измерения, доступных в вебе.
- Проценты. Размер в процентах будет рассчитываться от размеров элемента.
- Ключевое слово
auto
. Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию. - Ключевое слово
cover
. Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается. - Ключевое слово
contain
. Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.
Размеры в единицах измерения или процентах можно комбинировать с ключевым словом auto
. Первое значение будет отвечать за ширину фонового изображения, а второе — за высоту.
Ключевое слово auto
в случае комбинации позволяет сохранять пропорции изображения.
Подсказки
Скопировано💡 Значение по умолчанию — auto
.
💡 Значение свойства не наследуется.
💡 Чаще всего используется значение cover
. Второе по популярности значение — contain
. Также часто можно увидеть значение 100
, но с ним следует быть аккуратным. Точные размеры фона указываются крайне редко. Не принято оставлять значение по умолчанию.
💡 Свойство размера фона можно анимировать при помощи свойства transition
🥳
На практике
Скопированосоветует Скопировано
🛠 Если для задания фона используется шорткат background
, то значение для background
указывается последним, после слэша /
. Пример: background
🛠 Свойство background
очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном.
<div class="element"></div>
<div class="element"></div>
.element { height: 100vh; background-color: #18191C; background-image: url("pattern.svg"); background-size: 100px auto;}
.element { height: 100vh; background-color: #18191C; background-image: url("pattern.svg"); background-size: 100px auto; }
Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.