background-size
For more information about the supported length units, see the CSS Values and Units Reference.
percentage An integer, followed by a percent (%). A percentage value is relative to the background positioning area.
Examples
Basic list of syntax examples for background-size.
HTML structure of a series of <div> s that are identical except that they have different background-size values applied to the background image.
CSS applied to the HTML example seen above.
Notes
Remarks
An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension. If either of these values is not available, the image’s intrinsic size is used. If the image’s intrinsic size is not available, it is assigned the value of 100%. If both values are auto , use the intrinsic width, height, or both, of the image. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for contain . Negative values are not allowed. In Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.
background — size
Нужно чтобы фоновая картинка заняла всю площадь элемента? Вам нужно это свойство!
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Алёна Батицкая советует
Обновлено 18 января 2022
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
Свойство background — size позволяет изменять размер фонового изображения. Если фоновая картинка не совпадает по размеру с размерами блока, то при помощи этого свойства можно сделать так, чтобы она, картинка занимала всю площадь блока или, наоборот, была определённого размера.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Создадим блок и в качестве фона зададим ему красивую панораму:
Если не указывать свойство background — size , то будет видна только небольшая часть картинки. Но хотелось бы, чтобы фон, несмотря на его нестандартный размер, смотрелся хорошо.
Укажем свойство background — size со значением 100 % 100 % . По логике с таким значением фон должен занимать 100% высоты элемента и 100% ширины элемента.
Если у вас широкий монитор, то можно и не заметить подвоха, но на узких мониторах картинка будет деформироваться и сплющиваться по ширине.
Есть способ заставить картинку занять всю доступную площадь и при этом не деформироваться. Зададим background — size : cover — cover переводится с английского как «обложка».
В этой версии ещё добавлено свойство background — position со значением center , чтобы в области видимости был центр изображения.
Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто обрезается. Именно значение cover используется чаще всего для создания красивых фонов.
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
Свойство background — size управляет размерами картинки внутри элемента, для которого эта картинка задана фоном.
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
В качестве значения для свойства background — size можно задавать:
- Точный размер в любых единицах измерения, доступных в вебе.
- Проценты. Размер в процентах будет рассчитываться от размеров элемента.
- Ключевое слово auto . Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию.
- Ключевое слово cover . Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается.
- Ключевое слово contain . Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.
Размеры в единицах измерения или процентах можно комбинировать с ключевым словом auto . Первое значение будет отвечать за ширину фонового изображения, а второе — за высоту.
Ключевое слово auto в случае комбинации позволяет сохранять пропорции изображения.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Значение по умолчанию — auto .
�� Значение свойства не наследуется.
�� Чаще всего используется значение cover . Второе по популярности значение — contain . Также часто можно увидеть значение 100 % 100 % , но с ним следует быть аккуратным. Точные размеры фона указываются крайне редко. Не принято оставлять значение по умолчанию.
�� Свойство размера фона можно анимировать при помощи свойства transition ��
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Если для задания фона используется шорткат background , то значение для background — size указывается последним, после слэша / . Пример: background : url ( ‘example . jpg’ ) no — repeat center / cover
�� Свойство background — size очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном.
Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.
CSS background-size Property
Specify the size of a background-image with "auto" and in pixels:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
>#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
>More «Try it Yourself» examples below.
Definition and Usage
The background-size property specifies the size of the background images.
There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).
Default value: auto Inherited: no Animatable: yes. Read about animatable Try it Version: CSS3 JavaScript syntax: object.style.backgroundSize="60px 120px" Try it Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property background-size 4.0
1.0 -webkit-9.0 4.0
3.6 -moz-4.1
3.0 -webkit-10.5
10.0 -o-CSS Syntax
Property Values
Value Description Demo auto Default value. The background image is displayed in its original size Demo ❯ length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units Demo ❯ percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" Demo ❯ cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges Demo ❯ contain Resize the background image to make sure the image is fully visible Demo ❯ initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit More Examples
Example
Specify the size of a background image with percent:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
>#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
>Example
Specify the size of a background image with "cover":
Example
Specify the size of a background image with "contain":
Example
Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover":
Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был “Царём горы”, наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
Использование background-size: cover
В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.
Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style . Рекомендуется использовать aria-label , который заменит атрибут alt , присутствующий в тегах img .
Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom , позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:
Всё вместе это будет выглядеть следующим образом:
Использование object-fit: cover
Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16
Это свойство применяется непосредственно к тегу img , поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt :
Затем CSS-код дополняется свойством height , которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit , которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height :
В результате получаем следующее:
Когда использовать каждое из решений
Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).
Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.