Как добавить изображение на фон в html

#5 – Работа с фоновыми картинками

При помощи CSS вы можете устанавливать любой задний фон для всего сайта в целом или же для определенных объектов. За урок мы научимся работать с фоном и отображать изображения за счет CSS.

Видеоурок

Вместо сплошного цвета на заднем фоне можно добавить картинку. Для этого необходимо прописать специальный стиль: background-image . Стиль является частью стиля background , о котором вы можете детальнее почитать в нашем справочнике .

Чтобы сделать задний фон картинкой необходимо указать полный путь к картинке, а также добавить характеристики отображения картинки: повторение, размещение, сжатие и так далее.

Простой способ сделать отзывчивые изображения с помощью фоновых картинок в CSS

Примечание редактора Frontender Magazine: cтатья была написана в 2012 году, когда не было элемента , о использовании которого можно прочесть, например, в статьях «Отзывчивые изображения: примеры использования и документированные снипеты, чтобы вы могли начать их использовать» и более ранней «Как избежать лишних загрузок для отзывчивых изображений». Данная статья, однако, содержит интересные приемы, о которых стоит знать.

Примечание редактора Smashing Magazine: в этой статье описано только одно из многих близких к оптимальному решений для создания отзывчивых изображений. Перед выбором конкретного решения мы рекомендуем ознакомиться с разными подходами, в том числе вот с этими: «Как избежать лишних загрузок при использовании отзывчивых изображений» и «Выбираем решение для изображений в отзывчивом дизайне».

Учитывая все разговоры о новых стандартах HTML5, таких как атрибут srcset и элемент , и применении серверных решений вроде Отзывчивого вебдизайна + Серверных компонентов (RESS), у вас могло сложиться впечатление, что на сегодняшний день простые статические сайты не могут содержать отзывчивые изображения. Однако это впечатление несколько преждевременно. На самом деле, есть простой и незамысловатый способ представления отзывчивых изображений, поддерживаемый всеми современными веб-браузерами: фоновые изображения в CSS.

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

В этой статье мы в несколько этапов рассмотрим подход с использованием фоновых изображений в CSS:

1. Сначала мы рассмотрим задачи и требования к отзывчивым изображениям.
2. Затем выясним как CSS-медиазапросы могут помочь нам определить главные характеристики пользовательских устройств.
3. Подробно рассмотрим ключевое свойство background-image , которое позволяет подстраивать изображение под эти характеристики.
4. Рассмотрим стратегию оптимизации отдельных изображений, из которых формируется набор изображений, решающий проблему отзывчивости.
5. Изучим ограничения этого подхода — в большинстве случаев их можно легко обойти.
6. И, наконец, определим проблемные моменты, для которых нет решения.

Примечание: чтобы использовать этот подход, вам понадобится полный контроль над таблицей стилей и HTML-разметкой вашего сайта. Если для него используется система управления контентом (CMS), у вас может быть недостаточно доступа к управлению этими компонентами сайта.

Потребность в отзывчивых изображениях

Отзывчивые изображения — это важная составляющая отзывчивого вебдизайна, подхода, предложенного Итаном Маркоттом (Ethan Marcotte) для удовлетворения требований мобильных устройств, которые очень широко используются для просмотра сайтов. Итан признал, что прежний подход, состоящий в создании отдельных сайтов для разных типов устройств, был не в состоянии справиться с требованиями огромного разнообразия устройств, которые используют посетители сайтов для доступа в интернет.

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

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

Чтобы полностью соответствовать контексту, в котором пользователь просматривает сайт, дизайн этого сайта должен учитывать все аспекты, влияющие на удобство использования, включая изображения. Вот пример из жизни: взгляните на сайт contfont.net. Этот одностраничный сайт состоит из одного изображения и типичного набора из HTML, таблицы стилей, шрифтов и JavaScript.

Компонент	Тип	Размер в сжатом виде
Главная страница	HTML	6 Кб
Таблица стилей	CSS	10 Кб
Шрифты	Веб-шрифт	221 Кб
Скрипты	JavaScript	21 Кб
Вспомогательные изображения	Изображение	48 Кб
Главное изображение	Изображение	??

На больших экранах сайт выглядит просто шикарно благодаря большому разрешению главного изображения. Загрузка этого изображения, однако, обходится недёшево: при разрешении 1940 × 1229 пикселей изображение даже после сжатия весит 446 Кб.

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

На iPhone изображение с разрешением 290 × 183 пикселей и размером 18 Кб выглядит точно так же, как изображение с разрешением 1940 × 1229 пикселей и размером 452 Кб выглядит на MacBook Pro. Крупнее.

Что это значит для пользователя, который просматривает сайт, скажем, на смартфоне старого поколения? Для этого пользователя изображение с разрешением 290 × 183 пикселей и размером 18 Кб будет выглядеть точно также, как его большая версия. Если не применять отзывчивый подход к изображениям, пользователю придётся скачивать дополнительные и абсолютно ненужные 429 Кб данных. И это создаёт не только теоретические неудобства — лишний вес значительно влияет на время загрузки сайта. Пользователь смартфона может просматривать сайт используя обычное подключение через 3G со скоростью 2 Мб/с. Если не использовать отзывчивое изображение, время загрузки сайта увеличивается от 1,3 секунд до 3 секунд — больше чем вдвое!

При соединении через 3G изображение исходного размера грузится 3 секунды, отзывчивое — 1,3 секунды. Крупнее.

Главная задача отзывчивого подхода к изображениям проста: загрузить изображение с разрешением, подходящим именно для этого устройства.

Определение пользовательского контекста

Поскольку сайты должны подстраиваться под контекст пользователя, нам нужен способ определения этого контекста. На сегодняшний день CSS предлагает наиболее эффективный способ различать устройства. Мы получаем ответы на два важных вопроса: какой размер экрана на устройстве пользователя? Поддерживаются ли изображения, оптимизированные под ретину?

Эту информацию мы можем получить благодаря CSS-медиазапросам. Медиазапросы позволяют прописать набор стилей, которые будут применяться только для устройств с определёнными характеристиками. Изначально медиазапросы ограничивались только типом носителя. В спецификации CSS описано достаточное их количество, например, braille (тактильные устройства на системе Брайля), speech (речевые синтезаторы), tty (устройства, поддерживающие только моноширинные шрифты, например, телетайпы) и tv (устройства вроде телевизоров с низким разрешением и без возможности прокрутки). На данный момент большинство браузеров понимает только два типа носителей: print (печатный материал, разбитый на страницы) и screen (экраны компьютеров).

В CSS3 была добавлена возможность указания определённых характеристик устройств, а не только типа носителя. Для устройств screen , можно указать множество характеристик экрана, в том числе его ширину, ориентацию, разрешение и соотношение логических и физических пикселей. Эти характеристики дают нам достаточно информации, чтобы подобрать изображение, подходящее под конкретное устройство.

Медиазапросы могут помочь решить дилемму, описанную немного выше. К примеру, у MacBook Pro с диагональю 15 дюймов ширина экрана составляет 1440 пикселей (пока что не будем рассматривать наличие ретины). В таблице стилей нашего сайта стиль для экранов таких размеров можно прописать так:

@media only screen and (min-width: 1440px) < /* стили для экранов с размером как у MacBook Pro и больше */ > 

Любые стилевые характеристики, описанные в этом блоке кода, будут применяться только когда пользователь открывает веб-страницу на устройстве с шириной экрана в 1440 пикселей. Однако здесь есть маленький нюанс: под размером экрана следует понимать не физический размер экрана устройства, а размер области просмотра в окне браузера. Размер области просмотра равен размеру окна браузера без различных окантовок вроде полосы прокрутки.

В общем-то, ширина окна браузера наверняка будет меньше 1440 пикселей, если только что пользователь не переключился на полноэкранный режим просмотра. Нам стоит это учесть в таблице стилей, 1200 пикселей наверное будет ближе к истине.

@media only screen and (min-width: 1200px) < /* стиль для широких экранов */ > 

Этот медиазапрос состоит из двух частей. Первая часть, only screen , указывает на то, что стиль не должен применяться при печати страницы или на нестандартных устройствах. (Слово only никак не влияет на сам медиазапрос: оно используется для очень старых браузеров, которые не распознают параметры устройства. Так как эти браузеры не понимают синтаксис only , они просто проигнорируют блок со стилями целиком). Во второй части медиазапроса, min-width: 1200px , указана минимальная ширина экрана, при которой должен применяться стиль. Оператор and , соединяющий эти части, указывает на то, что для срабатывания стиля оба условия должны быть верны.

Похожий приём можно использовать прописывая стили для смартфонов в портретной ориентации.

@media only screen and (max-width: 320px) < /* стили для узких экранов */ > 

В этом случае в медиазапросе можно смело указывать размер самого экрана устройства, так как браузеры на смартфонах всегда работают в полноэкранном режиме.

С помощью условий min-width и max-width можно легко определить ширину устройства пользователя. К сожалению, с определением ретины не всё так просто. Разные браузеры используют разный синтаксис для этого параметра, поэтому следует использовать вендорные префиксы. Ещё одна ложка дёгтя: в синтаксисе многих версий Firefox присутствует ошибка, так что для браузеров от Mozilla нам придётся использовать и нормальный синтаксис, и «дефектный». На данный момент для ретины рекомендуется использовать медиазапросы такого вида:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) < /* стили для дисплеев Retina */ > 

Когда-нибудь все браузеры будут поддерживать стандартную запись dppx (точки на дюйм), и мы сможем отказаться от вендорных префиксов в CSS.

CSS-cвойство background-image

Поскольку CSS позволяет достоверно определить контекст пользователя, может показаться, что теперь можно легко обеспечить поддержку отзывчивых изображений. Логично вроде бы задать display: none для изображений, которые не должны загружаться. Вот как этот способ будет выглядеть с привязкой к размеру экрана (для краткости опустим код для ретины):

 html lang="ru"> head> meta charset="utf-8"> title> title> style> img.smallscreen < display: none; > @media only screen and (max-width: 320px) < img < display: none; > img.smallscreen < display: inline; > > style> head> body> img src="largeimage.jpg"> img class="smallscreen" src="smallimage.jpg>  

Приведенный выше код будет отображать нужное изображение в зависимости от размера экрана, однако display: none не предотвращает загрузку скрытых изображений. Браузеры на смартфонах будут скачивать большое изображение, хоть оно и не будет отображено, так что, к сожалению, этот вполне логичный подход не решает главную задачу отзывчивых изображений.

Причина этой проблемы в том, что браузеры обрабатывают HTML отдельно от CSS. Разметка HTML запрашивает два файла с изображениями, и браузер их послушно загружает. Затем он проводит разбор стилей CSS и обнаруживает, что одно из изображений не должно отображаться, но уже поздно.

Наши медиазапросы в CSS будут работать только если они будут использоваться сугубо для свойств CSS, а не для содержимого HTML. Это может показаться невозможным, но, оказывается, есть хитрый способ использовать для изображений только CSS: с помощью свойства background-image . Вот как это делается:

1. В разметку HTML не помещайте никакие запросы на файлы изображений. Вместо этого используйте пустые элементы или .
2. Задайте этим элементами фоновые изображения через свойство background-image .
3. Используйте медиазапросы, чтобы изменять изображение в зависимости от размера и разрешения экрана.

Следуя этому алгоритму мы можем подкорректировать приведенный выше пример, чтобы наши отзывчивые изображения начали работать правильно:

 html lang="ru"> head> meta charset="utf-8"> title> title> style> #image < background-image: url(largeimage.jpg); > @media only screen and (max-width: 320px) < #image < background-image: url(smallimage.jpg); > > style> head> body> div id="image"> div> body> html> 

Вот так, в общих чертах, можно обеспечить поддержку отзывчивых изображений с помощью фоновых изображений CSS. На практике вам придётся написать немного больше кода (например, нужно каким-либо образом указать размер изображения). Дополнительный код будет обычным CSS без каких-либо хитростей.

Создание отзывчивых изображений

Теперь, когда мы разобрались как использовать отзывчивые изображения, следующий шаг, собственно, создать разные варианты одного изображения. Исходное изображение должно иметь максимально большое разрешение, как минимум равное максимальному разрешению, в котором оно будет представлено на сайте. (В случае с contfont.net разрешение исходного изображения равно 3888 × 2592 пикселей). Ваш графический редактор должен уметь изменять размер исходного изображения под контрольные точки дизайна вашего сайта.

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

Когда дело доходит до определения контрольных точек, не поддавайтесь искушению использовать одни и те же контрольные точки для разметки сайта и изображений. Очень редко отличные контрольные точки для разметки сайта оказываются подходящими для изображений. Вместо этого выберите оптимальные контрольные точки для конкретного изображения. Далее изложена стратегия, которой я пользуюсь при поиске оптимальных размеров изображения.

Сначала определитесь каким будет наименьшее оптимальное разрешение для изображения на вашем сайте. На contfont.net ширина наименьшей области просмотра на реально существующем устройстве составляет 320 пикселей — это iPhone без ретины в портретной ориентации. (Устройства с меньшей областью просмотра существуют и будут существовать — в виде смарт-часов, например — но вряд ли их будут использовать для просмотра сайтов). На сайте contfont.net при области просмотра шириной в 320 пикселей под изображение остаётся 290 пикселей, значит самое маленькое изображение, которое нам нужно подготовить, должно иметь разрешение 290 × 183 пикселя. С помощью графического редактора изменяем размер исходного изображения соответственным образом.

Затем создаём простую тестовую страницу для этого изображения. Я использую такую разметку:

 html lang="ru"> head> meta charset="utf-8"> title> title> head> body> img src="test.jpg" width="100%"> p>Размер окна: span id="size"> span> пикселей p> script> window.onresize = function( ) < document.getElementById("size").innerHTML = window.innerWidth; >; script> body> html> 

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

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

Увеличиваем размер окна браузера до ширины, при которой изображение будет выглядеть недопустимо некачественным. Эта ширина экрана — наша контрольная точка. Крупнее

После того как мы нашли первую контрольную точку, из исходного изображения создаём новое тестовое изображение с шириной, равной этой контрольной точке. Повторите те же действия с новым тестовым изображением, пока не найдёте следующую контрольную точку, и продолжайте в том же духе пока не доберётесь до максимальной ширины области просмотра, которую должен поддерживать браузер.

На этом этапе у нас есть контрольные точки для изображений и набор соответствующих изображений. Для экранов с ретиной нужно создать дополнительный набор изображений с удвоенным разрешением. Вот полный список изображений для сайта contfont.net:

Файл с изображением	Разрешение	Размер (без сжатия)
candc290.jpg	290 × 183	19,378 байт
[email protected]	290 × 183 (Retina)	56,277 байт
candc538.jpg	538 × 341	52,914 байт
[email protected]	538 × 341 (Retina)	159,867 байт
candc970.jpg	970 × 614	132,766 байт
[email protected]	970 × 614 (Retina)	451,939 байт

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

Обходим ограничения

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

Делаем изображения доступными

Стандартный тег поддерживает атрибут alt , который позволяет добавить альтернативное текстовое описание изображения. Это описание является важным для доступных сайтов, ведь содержимое alt , описывающее изображение, необходимо пользователям, которые посещают сайт с помощью скринридера. У фоновых изображений в CSS нет тега и, соответственно, атрибута alt , но их всё же можно сделать доступными для слабовидящих пользователей. Для этого добавляем в разметку два дополнительных атрибута:

div id="image" role="img" aria-label="Текстовое описание"> div> 

Первый дополнительный атрибут, role , позволяет скринридерам узнать, что исполняет роль тега , даже если по разметке этого не скажешь. Второй атрибут, aria-label служит для той же цели, что и атрибут alt в . Эти два дополнения позволяют скринридеру уведомить пользователя, что элемент является изображением, и прочитать альтернативное текстовое описание, предоставленное для этого изображения.

Масштабирование изображений в браузере

У тега есть еще одно полезное свойство, которое не используется при нашем подходе: автоматический перерасчет размеров и сохранение пропорций изображения браузером. Используя стандартный , можно задать ширину в процентах от содержащего элемента, и браузер автоматически рассчитает ширину изображения и пропорционально подстроит высоту. Например, взгляните на фрагмент ниже, в котором у изображения image.jpg естественный размер 600 × 300 пикселей.

div style="width: 400px"> img src="image.jpg">

div style="width: 400px"> span id="image"> span> div> 

#image < display: inline-block; width: 100%; font-size: 0; line-height: 0; vertical-align: middle; background-size: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(image.jpg); > 

div style="width: 400px"> span id="image"> span id="image-inner"> span> span> div> 

#image-inner < display: block; height: 0; padding-top: 63.3%; > 

div class="hero"> span id="cafe" role="img" aria-label="Кофе и круассан"> span class="inner"> span> span> div> 

.hero #cafe < width: 100%; display: inline-block; vertical-align: middle; font: 0/0 serif; text-shadow: none; color: transparent; background-size: 100%; background-position: 50% 50%; background-repeat: no-repeat; > .hero #cafe .inner < padding-top: 63.35%; /* высота/ширина изображения */ display: block; height: 0; > 

/* стандартный экран, не retina */ .hero #cafe < background-image: url("../img/candc970.jpg"); > @media only screen < /* маленький экран, не retina */ .hero #cafe < background-image: url("../img/candc290.jpg"); > > @media only screen and (min-resolution: 2dppx) < /* маленький экран, retina */ .hero #cafe < background-image: url("../img/[email protected]"); > > @media only screen and (min-width: 321px) < /* экран среднего размера, не retina */ .hero #cafe < background-image: url("../img/candc538.jpg"); > > @media only screen and (min-resolution: 2dppx) and (min-width: 321px) < /* экран среднего размера, retina */ .hero #cafe < background-image: url("../img/[email protected]"); > > @media only screen and (min-resolution: 2dppx) and (min-width: 539px) < /* большой экран, retina */ .hero #cafe < background-image: url("../img/[email protected]"); > > 

html  height: 100%; > body  background: url(fon.png) right bottom no-repeat; padding-right: 200px; >