Свойство background-size
Свойство background-size задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.
Синтаксис
Ключевые слова
| Значение | Описание |
|---|---|
| auto | Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции. |
| cover | Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком. |
| contain | Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте). |
Значение по умолчанию: auto .
Использование
Единицы для размеров и auto могут быть использованы в различных комбинациях, например, так: auto 20px , или 30% 20px , или auto 30% и так далее. В этом случае первый параметр задает размер фона по ширине, а второй параметр — размер фона по высоте. Если указан один параметр — то он будет задавать размер фона и по ширине, и по высоте одновременно.
Пример
Сейчас фоновая картинка будет иметь свой натуральный размер:
Пример
Сейчас фоновая картинка будет размер 300px на 400px (в нашем случае пропорции картинки исказятся):
Пример
Сейчас фоновая картинка будет размер 400px на 400px (в нашем случае пропорции картинки исказятся):
Пример
Сейчас фоновая картинка будет размер 400px по горизонтали, а по вертикали ее размер подстроится так, чтобы пропорции не исказились:
Пример
Сейчас фоновая картинка будет размер 400px по вертикали, а по горизонтали ее размер подстроится так, чтобы пропорции не исказились:
Пример . Значение contain
Посмотрите на работу значения contain :
.elem < background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
Пример . Значение cover
Посмотрите на работу значения cover :
.elem < background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
Пример . Улучшим работу cover
Работу значения cover можно улучшить, если отцентрировать картинку с помощью свойства background-position (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):
.elem < background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
. Значения в процентах
В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):
Пример . Значения в пикселях и процентах
В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):
Пример . Значение auto для одной из сторон + проценты
В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так — картинка будут оставаться неискаженной):
Пример . Значение auto для одной из сторон + пиксели
В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:
Пример . Значение 100% для обеих сторон
Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100% , можно было просто написать одно значение):
Пример . Значение contain
Сейчас картинка будет занимать всю ширину или всю высоту с сохранением пропорций. Поуменьшайте окно браузера, чтобы увидеть, что картинка в различных состояниях будет занимать или всю ширину или всю высоту:
Пример . Значение cover
Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:
Сравните с тем, как будет выглядеть картинка по умолчанию (при значении auto). Поуменьшайте окно браузера, чтобы увидеть отличия:
Смотрите также
- свойство background ,
представляющее собой свойство-сокращение для фона
background-size
Масштабирует фоновое изображение, согласно заданным размерам.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background-size: [, ]*| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
<размер>Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др. Задаёт размер фоновой картинки в процентах от ширины или высоты элемента. auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Песочница
auto auto 100% 100% auto 100% 100% cover contain
Пример
Объектная модель
Объект.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
- Анимация ссылок при наведении
- Масштабирование фона
- Несколько фоновых картинок
- Установка фона и градиента
background — size
Нужно чтобы фоновая картинка заняла всю площадь элемента? Вам нужно это свойство!
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Антон Капустинский
Обновлено 28 августа 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство background — size позволяет изменять размер фонового изображения. Если фоновая картинка не совпадает по размеру с размерами блока, то при помощи этого свойства можно сделать так, чтобы она, картинка занимала всю площадь блока или, наоборот, была определённого размера.
Пример
Скопировать ссылку «Пример» Скопировано
Создадим блок и в качестве фона зададим ему красивую панораму:
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; >
Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.
Как установить фон в CSS. Cвойство background
Свойство background позволяет установить фоновое изображение, цвет фона и другие свойства стиля для заданного элемента.
background также объединяет в себе несколько других свойств:
- background-color — задаёт цвет фона элемента;
- background-image — устанавливает фоновое изображение для элемента;
- background-position — определяет начальную позицию фонового изображения;
- background-repeat — указывает, должно ли фоновое изображение повторяться;
- background-size — устанавливает размер фонового изображения;
- background-attachment — определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.
�� Свойство поддерживается современными браузерами. Актуальная информация — на caniuse.com.
Синтаксис
selector
Значения и примеры использования
Background-color
Свойство background-color задаёт цвет фона элемента. Значение задаётся в виде hex-кодов, RGB-функций или названий цветов:
background-color: #FFA500; /* Оранжевый цвет фона с помощью hex-кода */ background-color: rgb(255, 0, 0); /* Красный цвет фона с помощью RGB-значения */ background-color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный фон с помощью RGBA-значения */ background-color: white; /* Цвет фона с помощью ключевого слова */ background-color: transparent; /* Прозрачный фон */ background-color: inherit; /* Наследует цвет фона */ .options
Background-image
Свойство background-image позволяет задать изображение в качестве фона элемента. Это может быть любой тип изображения, включая jpeg, png, gif, svg и другие. Значение этого свойства указывается в формате URL, который ссылается на изображение.
.image-section < height: 300px; background-image: url("./images/nunzio-guerrera-uWZL-6wsUt4-unsplash.jpg"); background-size: cover; background-position: center; >
Также есть возможность использовать несколько изображений для фона. Для этого нужно указать несколько значений url() через запятую. При этом каждое изображение будет располагаться друг над другом, начиная с первого указанного значения.
Background-repeat
Свойство background-repeat определяет, как фоновое изображение будет повторяться внутри элемента, когда оно меньше размера элемента.
background-repeat может принимать следующие значения:
- repeat — изображение будет повторяться как по горизонтали, так и по вертикали (это значение является значением по умолчанию).
- repeat-x — изображение повторяется только по горизонтали.
- repeat-y — изображение повторяется только по вертикали.
- no-repeat — изображение будет отображаться только один раз.
section < height: 200px; background-image: url("./images/image.jpg"); background-repeat: repeat; color: #070707; >
Background-position
Свойство background-position устанавливает позицию фона. Задаётся в процентах или пикселях относительно верхнего левого угла элемента. Чтобы выровнять центральную часть фонового изображения по центру элемента, можно использовать значение 50% 50% , где первое значение указывает позицию по горизонтали, а второе по вертикали.
.position < background-image: url("./images/image.jpg"); background-size: cover; background-position: 50% 50%; padding: 50px; color: #ffffff; >
Background-size
Свойство background-size позволяет установить размеры фонового изображения. Значение может быть указано в пикселях, процентах, которые рассчитываются от размера элемента, или любых других доступных для CSS единицах измерения. Также можно указать ключевое слово:
- auto — значение по умолчанию и оно указывает на то, что размер фонового изображения должен быть равен его исходному размеру.
- cover — фоновое изображение будет растянуто по всей ширине и высоте элемента, что приведет к обрезанию изображения, если его размеры не соответствуют размерам элемента. При этом гарантируется, что весь элемент будет полностью заполнен изображением.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: cover; background-position: center; >
- contain — фоновое изображение будет изменено пропорционально, чтобы подходить размеру элемента, что гарантирует, что вся картинка будет видна в элементе. Однако возможно оставление пустых областей с двух сторон элемента.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: contain; background-position: center; >
Background-attachment
Свойство background-attachment указывает, будет ли фон элемента прокручиваться вместе с содержимым страницы или останется на месте.
- scroll — фоновое изображение прокручивается вместе с элементом, как обычный фон.
- fixed — фоновое изображение остается на месте, когда элемент прокручивается.
- local — фоновое изображение фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: contain; background-attachment: fixed; >Нюансы
Если одновременно установлены background-color и background-image , то background-image будет отображаться поверх цвета фона.
Если установлен background-attachment: fixed , то позиционирование фона осуществляется относительно окна браузера, а не относительно элемента, на который установлен фон.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: cover; background-position: 50% 50%; background-attachment: fixed; >Если значение background-size указано в процентах, то размер изображения будет задаваться относительно размера элемента.
Материалы по теме
- Полупрозрачный градиент над картинкой на чистом CSS
- Специфичность селекторов в CSS
- Обзор цветовых форматов в CSS
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023