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

Пуленепробиваемый 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 */
}

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

ПоддержкаChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Konqueror
Базовая1.0 — webkit3.6 (1.9.2) — moz9.09.5 — o3.0 (522) — webkit3.5.4
3.04.0 (2.0)10.04.1 (532)
Для
contain и cover
3.03.6 (1.9.2)9.010.04.1 (532)
Для SVG backgrounds8.0 (8.0)

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

RTFM

Ссылки

Пошерить
Плюсануть
Отправить
Вотсапнуть

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

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

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

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

1. Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

2. Для вставки кода используйте специальные теги [code lang="php"]ваш код[/code]

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

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

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

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

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

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

Никита

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

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

position: relative

Не хочет работать в 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 работает? На моей машине - да!

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

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

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

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

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

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

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

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 и фоновая картинка стала строго устанавливаться по высоте.

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

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

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

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

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

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

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

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

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

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

slowpokewarrior

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

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

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

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

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

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

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

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

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

Марина

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

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

Рад помочь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дмитрий

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

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

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

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

Дмитрий

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

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

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

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

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

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

Дмитрий

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

background-attachment:fixed;

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

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

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

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

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

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

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

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

Ваш сайт.

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

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

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

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

Дмитрий

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

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

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

методы есть?

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

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

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

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

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

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

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

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

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

overflow?

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

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