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

Как подогнать фон под размер экрана в 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
  • Анимация ссылок при наведении
  • Несколько фоновых картинок
  • Установка фона и градиента

background-size

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ | | auto ] | cover | contain

Значения

<значение>Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. Задает размер фоновой картинки в процентах от ширины или высоты элемента. auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

    background-size   
.

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .

Opera до версии 10.53 использует нестандартное свойство -o-background-size .

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .

Правильное масштабирование фона

Не могу найти правильное решение моей задачи. нужно относительно размера масштабировать картинку фона(т.е. что бы хотя бы раз она была в полном размере). для картинок размер которых больше экрана можно использовать

 background-size: 100% auto; 

но если картинка меньше экрана, то она просто растягивается. а мне этого не нужно. как это можно сделать средствами css?

Отслеживать
задан 9 мар 2014 в 16:16
587 3 3 золотых знака 5 5 серебряных знаков 21 21 бронзовый знак
htmlbook.ru/css/background-size background-size: [ | | auto ] | cover | contain
10 мар 2014 в 1:16
@Yura Ivanov а пример можно?
10 апр 2014 в 16:10
@M11, можно, конечно. по ссылке пройдите, там пример.
10 апр 2014 в 21:44
@Yura Ivanov мне бы именно так background-size: [ <значение>| | auto ] | cover | contain
11 апр 2014 в 9:14
А мне нравится, что растягивается.
4 июн 2017 в 15:42

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если написать вот так:

.demo

Мы передадим такие пожелания браузеру:

  • Вставь на фон блока с классом «demo» картинку с котиком
  • Размести ее, по возможности, в центре этого блока
  • Не надо использовать свойство «замостить», если фоновая картинка меньше этого блока

Немного уточним пожелания:

.first
  • Хочу, чтобы фоновое изображение было 100 на 100 пикселей; масштабировать не надо; пропорции сохранять не надо
.second
  • Хочу, чтобы фоновое изображение заняло максимальную область блока, при которой сохранит свои пропорции и будет видно целиком

И последний вариант:

.third
  • Хочу, чтобы фоновое изображение закрыло блок целиком, оно не обязательно должно быть видно целиком, главное, чтобы сохранились пропорции

Поскольку мы в самом начале указывали расположение фонового изображения в центре блока, в первую очередь будет видна центральная часть изображения. Это можно изменить с помощью свойства background-position

Что в итоге получится (первый, второй и третий примеры один под одним):

Как сделать картинку фоном в html

Чтобы установить картинку в качестве фона в HTML, можно использовать свойство background-image в CSS.

Например, чтобы установить картинку «background.jpg» в качестве фона для элемента body , можно использовать следующий код:

 body  background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; >  

В этом примере свойство background-image задает путь к файлу изображения. Свойство background-repeat устанавливает, как изображение будет повторяться. Тут мы устанавливаем значение no-repeat , чтобы изображение не повторялось. Свойство background-size устанавливает размер изображения. В данном примере мы устанавливаем значение cover , чтобы изображение занимало всю доступную область и сохраняло свои пропорции.

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

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