Фон для сайта с картинкой на весь экран (background-size)

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

Фон для сайта

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

  • заполнить всю страницу одним изображением без пробелов;
  • изменение размеров картинки при необходимости (уменьшении окна браузера);
  • сохранение пропорций изображения;
  • расположение изображения в центре страницы;
  • отсутствие полос прокрутки на странице;
  • кросс-браузерное решение, подходящее для разных браузеров;
  • реализация без всяких сторонних технологий типа 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;
}

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

  • 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')";

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

CSS-хак номер 1

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

Дальше в хаке используется опция @media для проверки является ли окно браузера меньшим чем изображение и с помощью процентного значения left и свойства margin-left выравниваем картинку по центру.

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% сохраняя пропорции.

<img src="images/bg.jpg" id="bg" alt="">
#bg {
        position:fixed;
        top:0;
        left:0; 
 
        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
}

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

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>
#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, коды используются следующие:

<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(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. Бзаузеры – основной инструмент для работы пользователя в интернете, а лучшие firefox плагины помогают сделать ее максимально удобной, быстрой за счет новых функций и возможностей.
Хотите купить книгу? – не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть – выбрать, оплатить и оформить доставку на дом.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 18 для поста Фон для сайта с картинкой на весь экран (background-size)
  1. ]]> naikom blog ]]> (December 18, 2011)

    полтора года назад пост об этом я опубликовал.. naikom.ru/blog/archives/1409

  2. ]]> Tod ]]> (December 19, 2011)

    naikom, бывает) Меня спросили как это сделать по почте, я поискал в англоязычных блогах и решил поделиться решением со всеми сразу.

  3. ]]> Rafail1986 ]]> (January 12, 2012)

    Очень вовремя, спасибо за перевод!

  4. ]]> Марина ]]> (January 13, 2012)

    Ух ты ! Спасибо!

  5. ]]> Айдентика ]]> (January 31, 2012)

    Да, сейчас очень популярны сайты со сменяющимся бекграундом во весь экран, которым часто присваивают “site of the day” на том же awwwards’е . Даже видео так же вставляют на главную страницу во весь экран. Очень красиво смотрится с качественными фотографиями и грамотной типографикой. Единственная проблема в том, что не все разработчики могут правильно написать код, который будет грамотно подгонять правильный размер картинки для разных разрешений монитора . Порой открываешь подобный сайт, а на нем картинка сплющена по вертикали, что сразу так забавно и очень бросается в глаза.

  6. ]]> itrex111 ]]> (March 8, 2012)

    А применимо ли всё это для отдельного background div-a в ie8???

  7. ]]> Milka ]]> (May 9, 2013)

    На IE8 не работает(((

  8. ]]> Sanya ]]> (July 19, 2013)

    Спасибо огромное, очень выручил))

  9. ]]> Максим ]]> (February 20, 2014)

    Я на своем сайте так сделал, все работает, можете посмотреть creativesite-perm.ru

  10. ]]> Алексей ]]> (April 29, 2014)

    Максим, сей творение нужно держать при себе, а не выпускать в свет. Это просто тихий ужас…

  11. ]]> Andron ]]> (May 1, 2014)

    Жалко что осёл досихпор впихивается народу.

  12. ]]> Дмитрий ]]> (September 23, 2014)

    Привет! Подскажите как установить фоновое изображение в блог на Вордпресс,стандартным способом через админ панель.

  13. ]]> Tod ]]> (September 24, 2014)

    Дмитрий, это возможно только если шаблон поддерживает такую настройку. Поищите в разделе “Внешний вид”. В противном случае придется редактировать CSS стили через редактор во все том же разделе “Внешний вид” – “Редактор”.

  14. ]]> Меткий ]]> (March 18, 2015)

    Даже сейчас статья пригодилась, спасибо автору.

  15. ]]> NeZombi ]]> (October 29, 2015)

    Большое спасибо! Задумал фотоблог своего города запилить.
    На фоновой картинке и будет фото города с высоты полёта птичек :)
    Метод с jQuery самое то!
    зы. В статье есть не одна очепятка, но смысл понятен.

  16. ]]> Tod ]]> (October 30, 2015)

    NeZombi, рад, что вам пригодилось. Опечатки – моя проблема, хотя перечитываю статью перед публикацией несколько раз=\

  17. ]]> Рамиль ]]> (March 10, 2016)

    Спасибо! Очень круто на самом деле :) Сделал первым методом, всё заработало прям с первого раза так, как надо.

  18. ]]> Tod ]]> (March 10, 2016)

    Рамиль, рад, что у вас получилось)

Оставить комментарий
для статьи Фон для сайта с картинкой на весь экран (background-size)