Как растянуть фоновое изображение html css на весь экран

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

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. 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»:

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 широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Перевод статьи “How to Stretch a Background Image to Fit a Web Page” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Изображение фона на весь экран с помощью CSS

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

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

Демо

Свойство background-size

С помощью background-size можно масштабировать изображение по заданным размерам. Согласно документации этого свойства (ссылка на htmlbook) оно может принимать значения cover и contain.

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

Всё, что нам нужно установить фоновое изображения для HTML:

html{ /* Это изображение отобразиться на всю страницу */ background:url('background.jpg') no-repeat center center; /* Принудительно указываем высоту равную 100% от высоты окна браузера */ min-height:100%; /* Магия */ background-size:cover; } body{ /* Для некоторых мобильных браузеров */ min-height:100%; }

Готово! Теперь изображение отображается на весь экран, даже при изменении размера окна браузера. Работает так же в IE9+.

Как растянуть фон CSS

Привет. Сегодня рассмотрим, как можно растянуть фон css средствами (без вмешательства других средств, таких как javascript и иже с ними).

Растянуть фон CSS средствами стало возможно с появлением CSS3, конкретно при помощи свойства background-size. Надо сказать, что это свойство работает намного лучше, чем аналогичные решения на Javascript (которые использовались до появления background-size), так как быстрее и адекватнее реагирует на изменение размера браузера, быстрее сглаживает растянутую картинку, и, как любили говорить в начале 2000-х, — «Будет работать даже с отключенным Javascript».

Решение: как растянуть фон CSS средствами

У свойства background-size может быть несколько значений. 1) это может быть одна из дирректив: cover или contain.

background-size: contain; /* Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. */ background-size: cover; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */

2) это могут быть проценты (100% или 94% от ширины контейнера). При этом можно использовать как 1 значение в процентах, так и 2. Если значений будет 2, то масштабироваться будут одновременно и высота и ширина картинки, при этом каждая из величин подгоняется пропорционально процентами указанными в параметрах).

background-size: 100%; /*Равносильное директиве cover*/ background-size: 100% 50%; /*Ширина будет на 100% ширины блока, а вот высота — только на 50%, картинка скорее всего будет деформирована*/

3) прямо численное значение (в пискелях, сантиметрах, em и т.д.). Параметров также может быть 2 (или 1), как и в предыдущем случае. 4) значение auto. Обозначает, что картинка не будет растягиваться, а будет использован исходный размер. При этом, параметров также может быть 2 или 1. То есть можно указать следующее:

background-size: 60% auto; /*ширина картинки будет 60%, а высота пропорциональна размерам исходной картинки*/

Где будет работать решение растянуть фон CSS?

Судя по данным сайта Can I Use, работать будет во всех современных браузерах, включа IE версии не ниже 9. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости:

Понравилась или помогла статья? Купите мне кофе

Как растянуть фоновое изображение содержимого на весь экран?

Попробуйте под кодом...

#container .item .bg_img{ background: url('/img/mainpage/demo.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

ответ дан Kailash Ahirwar 26 сент. '13 в 16:01

источник поделиться

Вы имеете в виду изображение, которое связано с контекстом тела, а не с.item?

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

background-size: обложка будет гарантировать, что изображение само покроет страницу. В зависимости от используемого изображения вам может понадобиться другое решение. Например: вы можете центрировать изображение и исчезать до цвета фона (но это зависит от вас)

Используйте z-указатель -1, чтобы убедиться, что он не скрывает ваш контент.

item .bg_img { background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center; background-size: cover; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }

Сценарий: http://jsfiddle.net/Aa8fe/

ответ дан hvgeertruy 26 сент. '13 в 16:19

источник поделиться

Даже я боролся за то же самое и продолжаю, я получил решение... ниже.

body //your container name { background-image: url(Images/caramel%20gradient%20for%20website.png); background-size: 100%; }

ответ дан Sasidharan 26 сент. '13 в 16:03

источник поделиться

---

Смотрите также

• 
  Как в word сделать один лист книжный а другой альбомный
• 
  Как в word включить проверку орфографии
• 
  Как изменить цвет таблицы в word
• 
  Как открыть защищенный файл word
• 
  Как документ html перевести в word
• 
  Как восстановить поврежденные word файлы
• 
  Как в html сделать переход на другую страницу
• 
  Прозрачность в css
• 
  Css размеры в
• 
  Как начать работу с php
• 
  Как в word разбить таблицу