Как растянуть фоновое изображение, чтобы заполнить веб-страницу

Картинки – важная часть привлекательного дизайна веб-сайта. Фоновые картинки могут прибавить визуального интереса странице. background image HTML поможет приобрести тот визуальный дизайн, который вы ищете.

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

Лучший метод растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в « 100% «. Так что рисунок растянется и заполнит весь экран.

body { background: url(bgimage.jpg) no-repeat; background-size: 100%;}

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Имитация растянутого фона в устаревших браузерах

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли веб-сайт корректно выводиться в IE8. В этом случае необходимо имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6(-moz-background-size) и Opera 10.0(-o-background-size).

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

  1. Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:
id="bg" />
  1. Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту. Добавьте приведенный ниже программный код в таблицу стилей:
img#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:
All your content here - including headers, paragraphs, etc.

Примечание: теперь пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после картинки – большинство браузеров не отобразят его.

  1. Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:
#content { position: relative; z-index: 1;}
  1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много методов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
  2. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим веб-сайтам надо поддерживать IE 7 или 8, а IE6 – ещё меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Имитация растянутого фонового картинки на меньшем пространстве

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или ином элементе веб-страницы. Это сложнее, поскольку необходимо либо использовать абсолютное позиционирование.

  1. Разместите на странице изображение, которое будет использовано как фон.
  2. В таблице стилей установите ширину и высоту картинки. Заметьте, что можно без труда подставить проценты, но мне легче использовать значения длины.
img#bg { width: 20em; height: 30em;}
  1. Поместите содержимое в div с id «content», как мы делали раньше.
  2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового картинки:
div#content { width: 20em; height: 30em;}
  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.
#content { position: relative; top: -30em; z-index: 1; width: 20em; height: 30em;}

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

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

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