Как изменить размер background в html
Перейти к содержимому

Как изменить размер background в html

  • автор:

Масштабирование фона

Разрешение мониторов постоянно растёт и при вёрстке веб-страниц приходится учитывать самый широкий диапазон разрешений. Это особенно важно при использовании фонового рисунка, который либо обрезается при низком разрешении монитора, либо, наоборот, целиком не помещается при высоком разрешении. Одним из решений подобной ситуации является масштабирование фона. Конечно, это сулит некоторые неприятности вроде появления искажений и артефактов в изображениях, но и расширяет арсенал средств вёрстки.

Управлением размером отвечает свойство background-size , в качестве значения можно указывать ключевое слово cover , тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы); ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. На рис. 1 показано изменение размеров изображений при разных значениях background-size . Серым цветом выделен блок размером 280х200 пикселей, внутри которого устанавливается фон.

Исходные изображения

а. Исходные изображения

Значение cover

б. Значение cover

Значение contain

в. Значение contain

Значение 100% 100%

г. Значение 100% 100%

Значение 250px

д. Значение 250px

Рис. 1. Вид фоновых картинок в зависимости от значения background-size

Если указано два значения размера через пробел, то первое значение определяет ширину по горизонтали, а второе по вертикали. При этом пропорции игнорируются, что хорошо заметно по рис. 1г. Вместо одного из размеров допустимо использовать ключевое слово auto , тогда браузер вычисляет его автоматически, исходя из пропорций картинки.

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера.

Пример 1. Фоновая картинка

Результат данного примера показан на рис. 2. При изменении размеров окна фотография будет увеличиваться или уменьшаться, чтобы полностью заполнить всю веб-страницу.

Фоновая фотография

Рис. 2. Фоновая фотография

См. также

  • background-size
  • Анимация ссылок при наведении
  • Несколько фоновых картинок
  • Установка фона и градиента

Как изменить размер фонового изображения с помощью CSS3

Размер фонового изображения может быть изменен и масштабирован. В CSS2.1 фоновые изображения, применяемые к контейнеру, сохраняют свои фиксированные размеры. К счастью CSS3 ввел свойство background-size, которое позволяет растянуть или сжать фон. Оно идеально подходит, если вы используете методы адаптивного веб-дизайна для создания шаблонов.

Здесь можете найти разные методы:

Абсолютное изменение размера

Когда мы устанавливаем фоновое изображение, ширина и высота изображения по умолчанию устанавливаются в «auto», которое сохраняет оригинальный размер изображения. А если необходимо изменить размер изображения, могут быть использованы абсолютные измерения для установления нового размера (px, em, cm и др).

Измерения высоты могут быть применены, используя свойство background-size с абсолютным измерением.

При изменении размеров изображения пропорции (видимая область и форма отображения) должны быть сохранены. В противном случае, изображение может искажаться и терять качество.

Давайте рассмотрим пример фонового изображения с измененным размером:

Пример

html> html> head> title>Фоновое изображение с измененным размером title> style> .resized < width: 400px; height: 300px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 300px 200px; background-repeat: no-repeat; border: 1px solid #999; > style> head> body> h2>Фоновое изображение с измененным размером h2> div class="resized"> div> body> html>

Относительное изменение размера с помощью процентов

Использование процентных значений может быть довольно полезным при адаптивном дизайне. Когда используется процентное значение, размеры основываются на элементе, а не изображении. Если свойство background-size установлено как «100% 100%», фоновое изображение будет растянуто таким образом, чтобы оно заполняло всю область контента.

Пример

html> html> head> title>Фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 100% 100%; background-repeat: no-repeat; border: 2px solid #999; > style> head> body> h2>Фоновое изображение с измененным размером h2> div class="resized"> div> body> html>

Но ширина фонового изображения зависит от размера контейнера. Не рекомендуется использовать проценты, когда имейте определенную ширину для контейнера.

Максимальное масштабирование размера

Когда свойство background-size установлено в значение «contain», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло область контента. Но пропорции изображения (отношение высоты и ширины) будут сохранены.

Значение «contain» указывает, что фоновое изображение будет масштабировано независимо от размера контейнера таким образом, что каждая сторона была максимально больше, не переходя длину контейнера с соответствующей стороны.

Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но размеры контейнера не могут быть больше ширины и высоты.

Пример

html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-repeat: no-repeat; background-size: contain; border: 1px solid #999; > style> head> body> h2>Адаптивное фоновое изображение с измененным размером h2> p>Измените размер браузера и увидите результат: p> div class="resized"> div> body> html>

Заполнение фоном

Когда свойство background-size установлено в значение «cover», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло всю область контента. Изображение будет масштабировано, чтобы заполнить контентную область, но оно будет обрезано, если соотношения сторон различаются.

Пример

html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; border: 1px solid #999; > style> head> body> h2>Адаптивное фоновое изображение с измененным размером h2> p>Измените размер браузера и увидите результат: p> div class="resized"> div> body> html>

Установление разных фонов для разных устройств

Огромное фото на большом экране будет смотреться идеально, но на экране маленького устройства оно не будет таким эффектным. Тогда зачем загрузить большое фото, если вы все равно должны уменьшить его?

Можно использовать мультимедийные запросы для отображения разных изображений на разных устройствах.

Здесь используется правило @media. В данном примере можно увидеть одно большое изображение и другое поменьше. Они установлены так, чтобы быть отображены по-разному на разных устройствах. Вы увидите результат сами если измените ширину браузера.

Пример

html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> /* For width smaller than 400px: */ body < background-repeat: no-repeat; background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"); > /* For width 400px and larger: */ @media only screen and (min-width: 400px) < body < background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg"); > > style> head> body> p style="margin-top:220px;">Измените ширину браузера, и фоновое изображение изменится при 400px. p> body> html>

background-size¶

Свойство background-size масштабирует фоновое изображение, согласно заданным размерам.

Демо¶

  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
/* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Multiple backgrounds */ background-size: auto, auto; /* Not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Global values */ background-size: inherit; background-size: initial; background-size: unset; 

Значения¶

Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.

Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.

Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

background-size: auto; 

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
 html> head> meta charset="utf-8" /> title>background-sizetitle> 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> 

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; >      

Примеры background-size

Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *