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

  • sadas

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

  • Ivan

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

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

      • Никита

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

  • Ayzel

    Не хочет работать в 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;
    }

  • Max

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

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

      • Ayzel

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

  • Вот нашел еще вариант.
    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?

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

      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%;
      }
      /* Дальше стили под ИЕ */
      * 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.Я думал что в мониторах с разным разрешением она будет растягиваться и выглядеть пристойно. Но увы. Может есть способ дать команду подстраиваться под различные мониторы? В противном случае придется делать картинку 1920×1080. Лишние боковые части для уменьшения веса картинки придется закрыть при помощи свойства background-repeat: repeat;. Отсюда у меня к Вам второй вопрос. Можно ли задать при помощи background-repeat: repeat; и background-position: размножение картинки в строго ограниченной области? Например: от одной точки и до другой по вертикали и тоже самое по горизонтали.

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

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

  • slowpokewarrior

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

  • Polita

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

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

      • Polita

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

  • Марина

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

  • Иван

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

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

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

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

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

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

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

  • Дмитрий

    Да 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 смотрите — там бывают проблемы.

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

  • terr

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

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

      • MrEfrem

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

        • overflow?

          • MrEfrem

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

          • MrEfrem

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