Как изменить размер фоновой картинки через CSS3
Оригинал: sitepoint.com/css3-background-size-property
Перевод: Влад Мержевич
В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.
Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.
Абсолютное изменение размера
Могут применяться единицы измерения.
background-size: ширина высота;
По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.
Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:
background-size: 100px 200px;
Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
background-size: 100px;
/* аналогично */
background-size: 100px auto;
Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Относительное изменение размера через проценты
Если применяются проценты, размеры основываются на элементе, а НЕ изображении:
background-size: 50% auto;
Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна. Поменяйте ширину демонстрационной страницы чтобы понять, как изменяются размеры.
Масштабирование до максимального размера
Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:
background-size: contain;
Заполнение фоном
Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.
background-size: cover;
Масштабирование нескольких фонов
Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.
background:
url("sheep.png") 60% 90% no-repeat,
url("sheep.png") 40% 50% no-repeat,
url("sheep.png") 10% 20% no-repeat #393;
background-size: 240px 210px, auto, 150px;
Работа в браузерах
Последние версии всех браузеров поддерживают background-size без префиксов.
IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.
Просмотр демонстрационной страницы с background-size.
background-size | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Масштабирует фоновое изображение согласно заданным размерам.
Синтаксис
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
Значения
- <значение>
- Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
- <проценты>
- Задает размер фоновой картинки в процентах от ширины или высоты элемента.
- auto
- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
- cover
- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
- contain
- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size</title> <style> div { height: 200px; /* Высота блока */ border: 2px solid #000; /* Параметры рамки */ background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */ background-size: cover; /* Масштабируем фон */ } </style> </head> <body> <div>...</div> </body> </html>
Браузеры
Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.
Opera до версии 10.53 использует нестандартное свойство -o-background-size.
Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.
масштабируем фон — учебник CSS
Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.
Значения background-size
Значения для свойства background-size
можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).
Ключевые слова
auto
(значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:background-size: auto auto;
…то размеры фона останутся оригинальными. Если значение
auto
задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:background-size: 250px auto;
…то высота фоновой картинки будет вычисляться автоматически.
contain
— фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.
— фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.
Числовые значения
Как мы уже сказали, размер фонового рисунка можно определять с помощью значений, указанных в пикселях, процентах и других единицах измерения CSS.
Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:
background-size: 300px 300px;
Учтите, что изображение может исказиться, если вы не попадете в его пропорции:
Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto
:
Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически
Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.
Поддержка браузерами
Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.
Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.
Свойство background-size | CSS справочник
CSS свойстваОпределение и применение
CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.
Поддержка браузерами
background-size:"auto | length | cover | contain | initial | inherit";
JavaScript синтаксис:
object.style.backgroundSize = "150px 150px"
Значения свойства
Значение | Описание |
---|---|
auto | Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию. |
length | Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto. |
% | Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto. |
cover | Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения. |
contain | Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html> <html> <head> <title>Масштабирование фоновых изображений в CSS</title> <style> div { width : 8em; /* устанавливаем ширину блока */ height : 8em; /* устанавливаем высоту блока */ border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */ background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */ background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */ display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */ margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */ margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */ color : yellow; /* устанавливаем цвет шрифта желтый */ } .test {background-size : auto;} /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */ .test2 {background-size : 100px 100px;} /* задаем ширину и высоту фонового изображения */ .test3 {background-size : 70% 70%;} /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */ .test4 {background-size : cover;} /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */ .test5 {background-size : contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */ </style> </head> <body> <div class = "test">auto</div> <div class = "test2">100px 100px</div> <div class = "test3">70% 70%</div><br> <div class = "test4">cover</div> <div class = "test5">contain</div> </body> </html>Масштабирование фоновых изображений в CSS (свойство background-size). CSS свойства
background-size | CSS | WebReference
Масштабирует фоновое изображение, согласно заданным размерам.
Краткая информация
Значение по умолчанию | auto |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Да |
Синтаксис
background-size: <bg-size> [, <bg-size> ]*
<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- <размер>
- Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
- <проценты>
- Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
- auto
- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
- cover
- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
- contain
- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background-size</title> <style> div { height: 200px; /* Высота блока */ border: 2px solid #000; /* Параметры рамки */ background: url(/example/image/mybg.png) 100% 100% no-repeat; /* Добавляем фон */ background-size: cover; /* Масштабируем фон */ } </style> </head> <body> <div>…</div> </body> </html>
Объектная модель
Объект.style.backgroundSize
Примечание
Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.
Opera до версии 10.53 использует свойство -o-background-size.
Firefox до версии 4 использует свойство -moz-background-size.
Opera 9.5 некорректно устанавливает положение фиксированного фона.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.02.2020
Редакторы: Влад Мержевич
CSS background-size | TuHub
Общие сведения
Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.
У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.
Свойство background-size принимает либо ключевое слово (cover
или contain
), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto
. Например:
background-size: cover; /* ключевое слово */
background-size: contain; /* ключевое слово */
background-size: 100% 50%; /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto; /* не ключевое слово + плюс значение 'auto' */
Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.
Если указано только одно не ключевое значение, то второе считается как auto
.
Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).
Синтаксис свойства
- Синтакис:
background-size: <bg-size> [ , <bg-size> ]* /* где */ <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
- Значение по умолчанию:
auto
- Применяется: ко всем элементам
- Наследуется: да
- Анимируется: да, за исключением ключевых слов
Значения свойства
<length>
— значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.<percentage>
— значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойстваbackground-origin
не указано автором, будет использовано значениеpadding-box
, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.contain
— масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.cover
— масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.auto
— ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.- Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
- Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
- Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово
contain
. - Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
- Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.
Поддержка браузерами
CSS3 Background-image options
Пример
Ниже вы увидите пример использования свойства background-size
:
Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.
В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.
Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.
Абсолютное изменение размера
background-size: ширина высота; |
По умолчанию ширина и высота установлены как auto, что сохраняет исходные размеры изображения.
Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:
background-size: 100px 200px; |
Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
background-size: 100px; /* аналогично */ background-size: 100px auto; |
Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Относительное изменение размера через проценты
Если применяются проценты, размеры основываются на элементе, а НЕ изображении:
background-size: 50% auto; |
Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна.
Масштабирование до максимального размера
Свойство background-size также понимает ключевое слово contain. Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:
background-size: contain; |
Заполнение фоном
Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.
Масштабирование нескольких фонов
Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.
background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px; |
Все последние версии браузеров поддерживают свойство background-size.
Заключение
Ну вот, теперь мы знаем, как управлять размерами фонового изображения при помощи каскадных таблиц стилей CSS.
Не забудьте подписаться на обновления блога, чтобы не пропустить новые интересные статьи.
90000 CSS: Full Size background image 90001 Stack Overflow 90002 90003 Products 90004 90003 Customers 90004 90003 Use cases 90004 90009 90010 90003 Stack Overflow Public questions and answers 90004 90003 Teams Private questions and answers for your team 90004 90003 Enterprise Private self-hosted questions and answers for your enterprise 90004 90003 Jobs Programming and related technical career opportunities 90004 90003 Talent Hire technical talent 90004 90003 Advertising Reach developers worldwide 90004 90009 90024 Loading … 90025 90002 90003 90004 90003 Log in Sign up 90004 90031 90032 current community 90033 90034 90003 Stack Overflow help chat 90004 90003 90004 90039 90004 90009.90000 How to Resize Background Images with CSS3 90001 90002 In CSS2.1, background images applied to a container retained their fixed dimensions. Fortunately, CSS3 introduces the 90003 background-size 90004 property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. 90005 90002 There are several ways to define sizing dimensions — 90007 view the CSS3 background-size demonstration page 90008. 90005 90010 Absolute Resizing 90011 90002 Length measurements can be applied using: 90005 90014 90003 background-size: width height; 90004 90017 90002 By default, the width and height are set to 90003 auto 90004 which retains the original image dimensions.90005 90002 We can resize an image to a new size using absolute measurements such as px, em, cm, etc. The aspect ratio will be changed if necessary so, if our background image is 200 × 200 pixels, the following code keeps that height but halves the width: 90005 90014 90003 background-size: 100px 200px; 90004 90017 90002 If only one length is defined, it is assumed to be the width. The height is set to 90003 auto 90004 and the image will keep its aspect ratio, i.e. 90005 90014 90003 background-size: 100px; / * Is identical to * / background-size: 100px auto; 90004 90017 90002 This code will scale our 200 × 200 image to 100 × 100 pixels.90005 90010 Relative Resizing Using Percentages 90011 90002 If a percentage is used, the dimension is based on the containing element — 90007 NOT 90008 the size of the image, e.g. 90005 90014 90003 background-size: 50% auto; 90004 90017 90002 The width of the background image therefore depends on the size of its container. If our container width is 500px, our image is resized to 250 × 250. 90005 90002 Using a percentage can be useful for responsive designs. Resize the 90007 demonstration page 90008 to discover how the dimensions change.90005 90010 Scaling to the Maximum Size 90011 90002 The 90003 background-size 90004 property also accepts a 90003 contain 90004 keyword. This scales image so it fits the container. In other words, the image will grow or shrink proportionally but the width and height will not exceed the container’s dimensions: 90005 90014 90003 background-size: contain; 90004 90017 90002 90067 90005 90010 Filling the Background 90011 90002 90003 background-size 90004 also accepts the 90003 cover 90004 keyword.The image is scaled to fit the entire container but, if that has a different aspect ratio, the image will be cropped: 90005 90014 90003 background-size: cover; 90004 90017 90002 90082 90005 90010 Sizing Multiple Backgrounds 90011 90002 Multiple backgrounds can be resized using a comma-separated list of values which apply in the same order, e.g. 90005 90014 90003 background: url ( «sheep.png») 60% 90% no-repeat, url ( «sheep.png») 40% 50% no-repeat, url ( «sheep.png») 10% 20% no-repeat # 393; background-size: 240px 210px, auto, 150px; 90004 90017 90010 Browser Compatibility 90011 90002 The latest versions of all browsers support 90003 background-size 90004 without a prefix.90005 90002 IE8 and below do not support the property. You could use an IE filter to emulate contain and cover but it’s not possible to resize background images without resorting to tricks such using real 90003 img 90004 s behind other elements. It’s messy; I recommend graceful degradation. 90005 90010 Shorthand Notation 90011 90002 The W3C CSS Backgrounds and Borders Module Level 3 Specification states 90003 background-size 90004 can be defined after 90003 background-position 90004 in shorthand 90003 background 90004 notation.None of the browsers support this option so, for now, 90003 background-size 90004 must be defined as a separate property. 90005 90002 90007 View the CSS3 background-size demonstration page … 90008 90005 90002 90119 Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown — covering CSS animations, transitions, transformations and much more. 90120 90005 .90000 background-size — CSS Reference 90001 90002 90003 All properties 90004 90003 Animations 90004 90003 Backgrounds 90004 90003 Box model 90004 90003 Flexbox 90004 90003 CSS Grid 90004 90003 Positioning 90004 90003 Transitions 90004 90003 Typography 90004 90021 90002 90023 align-content 90004 90025 align-items 90004 90027 align-self 90004 90029 animation-delay 90004 90031 animation-direction 90004 90033 animation-duration 90004 90035 animation-fill-mode 90004 90037 animation-iteration-count 90004 90039 animation-name 90004 90041 animation-play-state 90004 90043 animation-timing-function 90004 90045 animation 90004 90047 background-attachment 90004 90049 background-clip 90004 90051 background-color 90004 90053 background-image 90004 90055 background-origin 90004 90057 background-position 90004 90059 background-repeat 90004 90061 background-size 90004 90063 background 90004 90065 border-bottom-color 90004 90067 border-bottom-left-radius 90004 90069 border-bottom-right-radius 90004 90071 border-bottom-style 90004 90073 border-bottom-width 90004 90075 border -bottom 90004 90077 border-collapse 90004 90079 border-color 90004 90081 border-left-color 90004 90083 border-left-style 90004 90085 border-left-width 90004 90087 bor der-left 90004 90089 border-radius 90004 90091 border-right-color 90004 90093 border-right-style 90004 90095 border-right-width 90004 90097 border-right 90004 90099 border-style 90004 90101 border-top-color 90004 90103 border- top-left-radius 90004 90105 border-top-right-radius 90004 90107 border-top-style 90004 90109 border-top-width 90004 90111 border-top 90004 90113 border-width 90004 90115 border 90004 90117 bottom 90004 90119 box-shadow 90004 90121 box-sizing 90004 90123 clear 90004 90125 color 90004 90127 column-count 90004 90129 column-gap 90004 90131 column-width 90004 90133 content 90004 90135 cursor 90004 90137 display 90004 90139 flex-basis 90004 90141 flex-direction 90004 90143 flex-flow 90004 90145 flex-grow 90004 90147 flex-shrink 90004 90149 flex-wrap 90004 90151 float 90004 90153 font-family 90004 90155 font-size 90004 90157 90021 .90000 css — Multiple backgrounds with different background-size 90001 Stack Overflow 90002 90003 Products 90004 90003 Customers 90004 90003 Use cases 90004 90009 90010 90003 Stack Overflow Public questions and answers 90004 90003 Teams Private questions and answers for your team 90004 90003 Enterprise Private self-hosted questions and answers for your enterprise 90004 90003 Jobs Programming and related technical career opportunities 90004 90003 Talent Hire technical talent 90004 90003 Advertising Reach developers worldwide 90004 90009 90024 Loading … 90025 .