Время для прочтения: 1 мин. 17 сек.

Пуленепробиваемый background-size

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

Собрав в кучу CSS2, CSS3, фильтры для IE и специфические вендорные префиксы для разных браузеров, получаем почти кроссбраузерное решение поставленной задачи.


html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
}
body {
    background-attachment: fixed;
    background-image: url('images/body_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -o-background-size: 100% 100%; /* opera ≥ 9.5 */
    -webkit-background-size: 100% 100%; /* Safari ≥ 5.0, Chrome ≥ 4.0 */
    -khtml-background-size: 100% 100%; /* Konqueror ≥ 3.5.4 */
    -moz-background-size: 100% 100%; /* Firefox ≥ 3.6 */
    background-size: 100% 100%; /* браузеры с поддержкой CSS3: FF ≥ 4, Opera ≥ 10.53, IE ≥ 9.0 */
} 
/* Через условные комментарии или хаки пишем стили для IE */   
* html body {
    /* IE8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/google-chrome.jpg',sizingMethod='scale')";
    /* IE < 8 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/body_bg.jpg', sizingMethod='scale');
    background-image: none; /* IE ≤ 9.0 */
}

Поддержка браузерами

Поддержка Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Konqueror
Базовая 1.0 — webkit 3.6 (1.9.2) — moz 9.0 9.5 — o 3.0 (522) — webkit 3.5.4
3.0 4.0 (2.0) 10.0 4.1 (532)
Для
contain и cover
3.0 3.6 (1.9.2) 9.0 10.0 4.1 (532)
Для SVG backgrounds 8.0 (8.0)

Не применяйте фильтры для тега <html> — это приведет ко множеству проблем.

RTFM

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

49 комментариев

по хронологии
по рейтингу сначала новые по хронологии

Не пашет в осле 1 фиг картинка растянута по оригинальному размеру а не по div блоку

Автор
Кобзарёв Михаил

Версия ОС и версия ИЕ какие, в каком режиме осел? Doctype какой? Картинка фоном лежит для блока? Размеры блока указаны? Не помешает пример.

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

Автор
Кобзарёв Михаил

overflow?

И ещё к body можно добавить "background-attachment: fixed;", тогда оно никуда ездить вместе со скроллингом не будет.

Неустановлено.

Автор
Кобзарёв Михаил

Самом собой можно.

Дмитрий

Не работает в IE6-8 Последняя стройка background-image: none; убирает картинку,

то есть её нет больше,не пойму смысл тогда зачем эта строка. Расскажите чуть подробней

как всё же её растянуть для ie-6-8 ,если 6 не получится,то хотя бы 7 и 8. Может ещё какие

методы есть?

Автор
Кобзарёв Михаил

Для ИЕ6-7 строки 20-26: скрываем оригинальный фон и растягиваем его через фильтр. Вы не в IETester смотрите - там бывают проблемы.

Дмитрий

Разобрался,я не так сделал просто. Правда ещё дописал вот такую строку

background-attachment:fixed;

Она дала зафиксировать картинку в нормальных браузерах. Проверяю конечно же в

IETester лучше не чё не попадалось,если есть что посоветуйте. Но есть ещё

маленький глюк,а именно в настоящем браузере Ie-8. Уменьшаю рабочий экран

до 10% и фон исчезает,только после перезагрузки вновь появляется. А в IETester

нет такого клюка даже в ie-6 как быть,куда картинка пропадает? А так сайт

классный,спасибо сегодня с 11 утра искал как растянуть картинку для ie и

везде только вилами по воде,но если ещё лучше показать и с примерами,то класс

будет для новичков.Щас записывать буду курс по CSS и обязательно порекомендую

Ваш сайт.

Автор
Кобзарёв Михаил

Лучше IETester пока ничего не придумно. Можно, конечно, в виртуальной машине запустить все ОС и на них поставить настоящие ИЕ, но это геморр.

Избавиться с проблемами в ИЕ можно будет попробовать при помощи expression или jQuery (как в статье у Криса Койера).

Пример добавил в ссылки.

Дмитрий

Глянул код,помогло,даже малость лучше чем я ожидал,а то есть данный код уменьшил

картинку путём отдаления,что я и хотел,но визуально получилось её размножение в IE.

Но у меня картинка одного тона,так что нормально вышло. А для нормальный браузеров

я поставил репитеться её. В общем нормально у меня вышло. Да ещё хотел спросить,у Вас

как то сайт криво отображается,то есть правая колонка упала вниз и чтоб прочесть текст

надо идти в низ и сдвигать там прокрутку,что реально не удобно,я в Мозиле смотрю 8 версия.

Спасибо за багфикс. Поправим. У вас Windows?

Дмитрий

Да XP SP3,работаю по старинке. 7 не устраивает из-за своих недоработок мелких,но для

меня значительных. Я так понял Вы программист,услуги дорого стоят Ваши? Где можно

спросить об этом,если что пишите на мыло,что я ввожу.

Об этом можете спросить по аське.

Я тут зарегинелся,только вот не пойму а где же аська твоя? Или сюда выложишь?

Автор
Кобзарёв Михаил

Все данные есть в контактах.

Все почти здрово! 🙂

Одна проблемка которую никто пока не указал.

При использовании конструкции в ИЕ (проверял в 7 и 8 ) становятся недоступны ссыли в тексте страниц, т.к. они накрываются изображением фильтра AlphaImageLoader.

Если подскажите решение - буду весьма благодарен.

Спасибо за код в любом случае!

Автор
Кобзарёв Михаил

Обычно для ссылок пишут position: relative;

Всё бы хорошо, но для случая когда repeat-x, repeat-y или просто repeat?

Автор
Кобзарёв Михаил

Как вы себе представляете картинку, растянутую на весь экран по ширине и высоте да еще и повторяющуюся? Да и в статье пример для случая, когда width=100% и height=100%

За костыли для IE спасибо! Для фоток лучше значение cover ставить. Оно сохранит пропорции самой фотографии (background-size:cover;)

Марина

Спасибо:))) Помог.

Автор
Кобзарёв Михаил

Рад помочь

Почему то в ие7 фоновая картинка таким образом не отображается. То есть фильтр progid:DXImageTransform.Microsoft.AlphaImageLoader не подгружает картинку. Может для этого нужны какие то определенные условия? Пытаюсь таким образом сделать бэкграунд для дива.

Автор
Кобзарёв Михаил

hasLayout включить нужно, без этого фильтры не работают. А мой пример внизу страницы работает?

Спасибо! Указала для элемента overflow: hidden и все замечательно заработало. Еще добавлю что для внутренних элементов желательно отменять фильтр, так как например радио кнопки перестали работать в блоке. Какой пример внизу страницы, не поняла.

Автор
Кобзарёв Михаил

Да, пример работает, не заметила его.

slowpokewarrior

Спасибо, помогли.

Автор
Кобзарёв Михаил

Рад стараться!

Здравствуйте !

Помогите пожалуйста советом.У меня на сайте картинка стоит размером 1368х768.Я думал что в мониторах с разным разрешением она будет растягиваться и выглядеть пристойно. Но увы. Может есть способ дать команду подстраиваться под различные мониторы? В противном случае придется делать картинку 1920x1080. Лишние боковые части для уменьшения веса картинки придется закрыть при помощи свойства background-repeat: repeat;. Отсюда у меня к Вам второй вопрос. Можно ли задать при помощи background-repeat: repeat; и background-position: размножение картинки в строго ограниченной области? Например: от одной точки и до другой по вертикали и тоже самое по горизонтали.

Автор
Кобзарёв Михаил

Если вы применили способ из поста - картинка будет растягиваться. Мой пример смотрели?

Пример смотрел.Класно,меня устраивает.Дело в том что я на пути обучения и

если Вы подскажите как применить Ваш способ буду благодарен.Я скопировал

весь код и на абум решил вставил в main.css в место #bg { background: url(../images/) no-repeat fixed 50% #5F3115;}. Dreamweaver пишет о не корректной установке.Я заранее знал что вряд ли выйдет, но решил про-экспериментировать.

Автор
Кобзарёв Михаил

Пример ваш показать сможете?

Вот нашел еще вариант.

body {

background: url(../images/" width="100%" height="100%"/>" width="100%" height="100%"/>) top center fixed no-repeat;

-webkit-background-size: 100%;

-moz-background-size: 100%;

-o-background-size: 100%;

background-size: 100%;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";

overflow: auto;

}

Вставил в стиль CSS вместо #bg { background: url(../images/bg.jpg) и появились изменения.В разных браузерах смотрел,выглядит нормально.Не знаю правда как в разрешениях 1440x900, 1600x1200 и 1920x1080.

С удовольствием попробовал бы Ваш код,(он у Вас "серьезнее") но не знаю куда и что вставлять чтобы Dreamweaver не выдавал ошибку.Не разберусь куда писать стили для IE?

Автор
Кобзарёв Михаил

В вашем случае:

body {

background: url(../images/" width="100%" height="100%"/>" width="100%" height="100%"/>) top center fixed no-repeat;

-webkit-background-size: 100%;

-moz-background-size: 100%;

-o-background-size: 100%;

background-size: 100%;

}

/* Дальше стили под ИЕ */

* html body {

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bg.jpg’, sizingMethod=’scale’);

-ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bg.jpg’, sizingMethod=’scale’)»;

overflow: auto;

}

Заменил все значения-100% на cover и фоновая картинка стала строго устанавливаться по высоте.

Спасибо за сотрудничество и уделенное мне внимание!

Cover не работает, только scale

Автор
Кобзарёв Михаил

В каком браузере и какой версии? У меня везде работало. Покажите ваш код.

помоему в IE8 не работает этот способ, или я ошибаюсь?

Автор
Кобзарёв Михаил

Работает через фильтры. Проверьте

Не хочет работать в IE8 =\

body {

background-image: url(../images/" width="100%" height="100%"/>" width="100%" height="100%"/>);

background-repeat: no-repeat;

background-position: center center;

-o-background-size: 100% 100%; /* opera ≥ 9.5 */

-webkit-background-size: 100% 100%; /* Safari ≥ 5.0, Chrome ≥ 4.0 */

-khtml-background-size: 100% 100%; /* Konqueror ≥ 3.5.4 */

-moz-background-size: 100% 100%; /* Firefox ≥ 3.6 */

background-size: 100% 100%; /* браузеры с поддержкой CSS3: FF ≥ 4, Opera ≥ 10.53, IE ≥ 9.0 */

}

body {

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/tex.jpg’, sizingMethod=’scale’);

-ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/tex.jpg’, sizingMethod=’scale’)»;

overflow: auto;

}

Автор
Кобзарёв Михаил

Мой пример в ИЕ8 работает? На моей машине - да!

Спасибо, помогло 🙂

Автор
Кобзарёв Михаил

Рад стараться )))

Никита

Добрый день. Подскажите как решить проблему отсутствия кликабельности кнопок после применения фильтра в IE8. В комментариях говорили, что нужно отменять действие фильтра для элементов внутри блока div. //-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='false')";// Ставлю вот этот код, но результата нет. Подскажите, может что-то не так делаю.

Автор
Кобзарёв Михаил

position: relative

В опера не работает.
Информация о версии
Версия:
12.16
Сборка:
1860
Платформа:
Linux
Система:
x86_64, 3.13.0-36-generic