Верх страницы
Обложка к записи Пуленепробиваемый background-size
Время для прочтения: 0 мин. 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

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

49 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
terr
terr
12 лет назад

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

MrEfrem
MrEfrem
12 лет назад
Ответить на  Кобзарёв Михаил

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

MrEfrem
MrEfrem
12 лет назад
Ответить на  Кобзарёв Михаил

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

MrEfrem
MrEfrem
12 лет назад
Ответить на  Кобзарёв Михаил

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

Дмитрий
Дмитрий
12 лет назад

Не работает в IE6-8 Последняя стройка background-image: none; убирает картинку,
то есть её нет больше,не пойму смысл тогда зачем эта строка. Расскажите чуть подробней
как всё же её растянуть для ie-6-8 ,если 6 не получится,то хотя бы 7 и 8. Может ещё какие
методы есть?

Дмитрий
Дмитрий
12 лет назад

Разобрался,я не так сделал просто. Правда ещё дописал вот такую строку
background-attachment:fixed;
Она дала зафиксировать картинку в нормальных браузерах. Проверяю конечно же в
IETester лучше не чё не попадалось,если есть что посоветуйте. Но есть ещё
маленький глюк,а именно в настоящем браузере Ie-8. Уменьшаю рабочий экран
до 10% и фон исчезает,только после перезагрузки вновь появляется. А в IETester
нет такого клюка даже в ie-6 как быть,куда картинка пропадает? А так сайт
классный,спасибо сегодня с 11 утра искал как растянуть картинку для ie и
везде только вилами по воде,но если ещё лучше показать и с примерами,то класс
будет для новичков.Щас записывать буду курс по CSS и обязательно порекомендую
Ваш сайт.

Дмитрий
Дмитрий
12 лет назад

Глянул код,помогло,даже малость лучше чем я ожидал,а то есть данный код уменьшил
картинку путём отдаления,что я и хотел,но визуально получилось её размножение в IE.
Но у меня картинка одного тона,так что нормально вышло. А для нормальный браузеров
я поставил репитеться её. В общем нормально у меня вышло. Да ещё хотел спросить,у Вас
как то сайт криво отображается,то есть правая колонка упала вниз и чтоб прочесть текст
надо идти в низ и сдвигать там прокрутку,что реально не удобно,я в Мозиле смотрю 8 версия.

mihdan
12 лет назад

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

Дмитрий
Дмитрий
12 лет назад

Да XP SP3,работаю по старинке. 7 не устраивает из-за своих недоработок мелких,но для
меня значительных. Я так понял Вы программист,услуги дорого стоят Ваши? Где можно
спросить об этом,если что пишите на мыло,что я ввожу.

mihdan
12 лет назад

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

Bmw258
12 лет назад

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

Korniloff
12 лет назад

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

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

Беляш
11 лет назад

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

Иван
Иван
11 лет назад

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

Марина
Марина
11 лет назад

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

Polita
Polita
11 лет назад

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

Polita
Polita
11 лет назад
Ответить на  Кобзарёв Михаил

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

Polita
Polita
11 лет назад
Ответить на  Кобзарёв Михаил

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

slowpokewarrior
slowpokewarrior
11 лет назад

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

Владимир
11 лет назад

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

Владимир
11 лет назад
Ответить на  Кобзарёв Михаил

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

Владимир
11 лет назад

Вот нашел еще вариант.
body {
background: url(../images/bg.jpg) 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) и появились изменения.В разных браузерах смотрел,выглядит нормально.Не знаю правда как в разрешениях 1440×900, 1600×1200 и 1920×1080.
С удовольствием попробовал бы Ваш код,(он у Вас «серьезнее») но не знаю куда и что вставлять чтобы Dreamweaver не выдавал ошибку.Не разберусь куда писать стили для IE?

Владимир
11 лет назад
Ответить на  Кобзарёв Михаил

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

Max
Max
11 лет назад

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

Ayzel
Ayzel
11 лет назад
Ответить на  Кобзарёв Михаил

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

Ayzel
Ayzel
11 лет назад

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

body {
background-image: url(../images/tex.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 */
}
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;
}

Ivan
Ivan
10 лет назад

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

Никита
Никита
10 лет назад
Ответить на  Кобзарёв Михаил

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

sadas
sadas
9 лет назад

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

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы