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+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-size |
Версии 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>
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-size
Статьи по теме
- Как изменить размер фоновой картинки через CSS3
- Масштабирование фона
Статьи по теме
Рецепты 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. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Песочница
auto auto 100% 100% auto 100% 100% cover contain
div {
background-size: {{ playgroundValue }};
}Пример
<!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 некорректно устанавливает положение фиксированного фона.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 1 | 3 | 9 | 10.53 | 3 | 4.1 | 3.6 | 4 |
| 2.3 | 1 | 4 | 11 | 5. 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Цвет и фон
См. также
- background
- background-attachment
- background-clip
- background-image
- background-origin
- background-position
- background-repeat
- Масштабирование фона
- Несколько фоновых картинок
- Установка фона и градиента
Рецепты
- Как сделать фоновую картинку на всю ширину?
Практика
- Масштабирование фона
- Масштабирование фона 2
- Масштабирование фона 3
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.
02.2020
Редакторы: Влад Мержевич
Размер фона CSS
Это то, что заставляет всех людей жить в страхе и часто неуверенно. Он никогда не произносится, но любопытство всегда присутствует. Девять из десяти женщин соглашаются утвердительно. Рекламодатели делают все возможное, чтобы мы чувствовали себя неадекватными, но говорят нам, что это можно улучшить. Да, господа… оказывается, размер имеет значение.
background-size , т.е. CSS-свойство background-size позволяет разработчикам указывать размер, при котором фоновое изображение должно отображаться внутри элемента. Разработчик MooTools Кристоф Пойер использует background-size на своем веб-сайте, что позволяет его заголовку выглядеть «полным» в браузерах всех размеров, даже мобильных. Давайте посмотрим, как использовать мистическое свойство background-size .
размер фона CSS Свойство background-size имеет несколько предопределенных значений, а затем обычные числовые значения:
- содержат: Обеспечивает отображение всего фонового изображения, показывая изображение в увеличенном размере.
- cover: Масштабирует фоновое изображение таким образом, чтобы наименьший размер достигал максимальной ширины/высоты элемента.
- Длина/процент: Любой пользовательский числовой размер
Хотите верьте, хотите нет, но самая интересная часть — это задание длины и размеров в процентах. Вот несколько примеров использования background-size :
/* классы базовых заголовков */
# заголовок {
/* размер заголовка! */
высота: 350 пикселей;
/* дополнительные свойства фона */
фоновый повтор: без повтора;
фоновая позиция: по центру по центру;
/* немного теней для развлечения */
box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
}
/* покрытие */
#header.flex {
/* размер имеет значение */
размер фона: обложка;
}
/* содержать */
#header.flex {
/* размер имеет значение */
размер фона: содержит;
}
/* гибкий, веселый */
#header.flex {
/* размер имеет значение */
размер фона: 100% авто;
}
На веб-сайте Кристофа используется последний пример, что позволяет отлично рассмотреть фаната JavaScript при любом размере браузера.
Посмотрите мои демо, чтобы увидеть
Тонкое великолепие, обеспечиваемое использованием background-size , несколько удивительно. Обычно я довольно скептически отношусь к размеру окна и эффектам изменения размера, но этот метод помог мне увидеть ценность и простоту работы с фиксированными размерами и переменными эффектами в зависимости от размера браузера клиента. background-size поддерживается в Firefox, Safari, Chrome, Opera и IE9+.
Что вы думаете об этой методике — ловкий трюк или полезный инструмент? Вы бы использовали это на своем личном веб-сайте? Как насчет бизнес-сайта?
Фотографии, представленные в этом посте, были сделаны в Лондоне во время хакатона MooTools.
Автор: Дэвид Уолш
Представляем MooTools Шаблон
Одна из основных проблем при создании компонентов пользовательского интерфейса с помощью JavaScript-фреймворка MooTools заключается в том, что нет хорошего способа настройки шаблона и простоты создания узла.
На сегодняшний день существует два способа создания: новый элемент безумия Первый способ создания на основе пользовательского интерфейса…Джулиан Шапиро
Анимация CSS или JS: что быстрее?
Как возможно, что анимация на основе JavaScript тайно всегда была такой же быстрой — или даже быстрее — чем переходы CSS? И как возможно, что Adobe и Google постоянно выпускают мультимедийные мобильные сайты, которые конкурируют по производительности с нативными приложениями? Эта статья служит пошаговым…
На сегодняшний день существует два способа создания: новый элемент безумия Первый способ создания на основе пользовательского интерфейса…Дэвид Уолш
jQuery UI DatePicker: отключить указанные дни
Один проект, над которым я сейчас работаю, требует jQuery.
В проекте также есть средство выбора даты для запроса посещения их местоположения. Плагин DatePicker для пользовательского интерфейса jQuery был естественным выбором, и он отлично справляется со своей задачей. Одной из проблем, с которыми я столкнулся, была…Дэвид Уолш
В проекте также есть средство выбора даты для запроса посещения их местоположения. Плагин DatePicker для пользовательского интерфейса jQuery был естественным выбором, и он отлично справляется со своей задачей. Одной из проблем, с которыми я столкнулся, была…Как изменить размер фоновых изображений с помощью CSS3
В CSS2.1 фоновые изображения, применяемые к контейнеру, сохраняли свои фиксированные размеры. К счастью, в CSS3 появилось свойство background-size , которое позволяет растягивать или сжимать фон. Идеально, если вы создаете шаблон с использованием методов адаптивного веб-дизайна.
Существует несколько способов определения размеров размеров — просмотреть демонстрационную страницу размера фона CSS3 .
Абсолютное изменение размера
Измерения длины могут быть применены с использованием:
background-size: ширина высота;
По умолчанию для ширины и высоты установлены значения auto , при которых сохраняются исходные размеры изображения.
Мы можем изменить размер изображения до нового размера, используя абсолютные измерения, такие как px, em, cm и т. д. При необходимости соотношение сторон будет изменено, поэтому, если наше фоновое изображение имеет размер 200×200 пикселей, следующий код сохраняет эту высоту но вдвое меньше ширины:
размер фона: 100px 200px;
Если определена только одна длина, предполагается, что это ширина. Высота установлена на auto , и изображение сохранит соотношение сторон, т.е.
background-size: 100px; /* идентично */ размер фона: 100 пикселей авто;
Этот код масштабирует наше изображение 200×200 до 100×100 пикселей.
Относительное изменение размера с использованием процентов
Если используется процент, размер основывается на содержащем элементе — НЕ размер изображения, например.
background-size: 50% авто;
Следовательно, ширина фонового изображения зависит от размера его контейнера.
Если ширина нашего контейнера составляет 500 пикселей, размер нашего изображения изменяется до 250×250.
Использование процента может быть полезно для адаптивного дизайна. Измените размер демонстрационной страницы , чтобы узнать, как меняются размеры.
Масштабирование до максимального размера
Свойство background-size также принимает значение содержат ключевое слово . Это масштабирует изображение, чтобы оно соответствовало контейнеру. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:
background-size: contains;
Заливка фона
background-size также принимает ключевое слово cover . Изображение масштабируется, чтобы соответствовать всему контейнеру, но если оно имеет другое соотношение сторон, изображение будет обрезано:
background-size: обложка;
Изменение размера нескольких фонов
Размер нескольких фонов можно изменить, используя список значений, разделенных запятыми, которые применяются в одном и том же порядке, например.