Фоновое изображение на весь экран css. Растянуть background на всю ширину с помощью CSS

Задача

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.

Решение

Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Растягиваемый фон body { background: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */ }

Результат данного примера показан на рис. 1.

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2. Вид фона при увеличенном размере окна

Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.

Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.

Способ №1

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

Растягивать на весь экран будем вот эту картинку с милой девушкой 🙂

В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:

Body{ background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed , которое фиксирует изображение.

Способ очень простой, я его использую всегда и он меня устраивает на все 100%. Есть лишь одно но. Старые браузеры, не знакомы с CSS3, поэтому те кто используют древние версии не увидят должного результата.

Способ №2

Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id - bg :

И прописываем стили:

#bg { position:fixed; z-index: -1; top:0; left:0; min-width:100%; min-height:100%; }

Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто:).

Способ №3

Тут применяется jQuery . Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.

После библиотеки подключаем скрипт, который и будет масштабировать наш фон

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

И в конце добавляем стилей, чтобы все работало. Открываете файл стилей и добавляете в него следующий код:

#bg { position: fixed; top: 0; left: 0;z-index: -1; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

По стилям видно, что мы добавили позиционирование. В данном случаи это fixed . Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute , то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.

Также указан параметр - z-index: -1 , для того чтобы картинка была за текстом. Если у Вас нет текста, который должен быть спереди, можете убрать этот параметр.

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

На этом все, спасибо за внимание. 🙂

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

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

• заполнить всю страницу одним изображением без пробелов;
• изменение размеров картинки при необходимости (уменьшении окна браузера);
• сохранение пропорций изображения;
• расположение изображения в центре страницы;
• отсутствие полос прокрутки на странице;
• кросс-браузерное решение, подходящее для разных браузеров;
• реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html { background : url (images/bg.jpg ) no-repeat center center fixed ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size : cover; }

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Решение поддерживают почти все популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")" ;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";

Но внимание!!! при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

img.bg { /* Set rules to fill background */ min-height : 100% ; min-width : 1024px ; /* Set up proportionate scaling */ width : 100% ; height : auto ; /* Set up positioning */ position : fixed ; top : 0 ; left : 0 ; } @media screen and (max-width : 1024px ) { /* Specific to this particular image */ img.bg { left : 50% ; margin-left : -512px ; /* 50% */ } }

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 — работает;
• IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg { position : fixed ; top : -50% ; left : -50% ; width : 200% ; height : 200% ; } #bg img { position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; margin : auto ; min-width : 50% ; min-height : 50% ; }

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Хак работает в:

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position : fixed ; top : 0 ; left : 0 ; } .bgwidth { width : 100% ; } .bgheight { height : 100% ; }

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

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

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.

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

Техника с использованием только CSS. Часть #1.

Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство min-height , чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.

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

Вот код CSS:

Img.bg { /* Устанавливаем правила для заполнения фоном */ min-height: 100%; min-width: 1024px; /* Устанавливаем коэффициент пропорциональности */ width: 100%; height: auto; /* Устанавливаем позиционирование */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в:

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.

IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

IE 9: Работает.

Техника с использованием только CSS. Часть #2.

Другой способ решить задачу - поместить строчный элемент на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height , сохраняя коэффициент пропорциональности.

#bg { position:fixed; top:0; left:0; /* Сохраняем коэффициент пропорциональности */ min-width:100%; min-height:100%; }

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

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Работает в:

Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).

IE 8+.

Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Работает в:

IE7+ (с заглушками, вероятно, будет работать и в IE6)

Во всех остальных браузерах.

Заключение

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

Привет. Сегодня рассмотрим, как можно растянуть фон 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. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости: