Как растянуть фон на все окно браузера? Четыре простых решения на CSS и JavaScript. Свойство background-size

Фоновое изображение на всю страницуЧасто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт — фон всегда занимает весь экран браузера и не смотриться растянутым. Я тоже задавался этим вопросом и нашел ответ в хорошей статье Криса Койера. Сегодня приведу вольный перевод, максимально близко к тексту. Будут рассмотрены четыре разных способа сделать фоновый рисунок на всю страницу. В конце статьи — ссылка на архив с демо страницами.

Фоновое изображение на всю страницу
Цель у нас такова, что фоновый рисунок на сайте должен закрывать все видимое окно браузера в любое время. Вот некоторые конкретные требования:

  • Изображение заполняет всю страницу, без пробелов
  • Рисунок масштабируется если нужно
  • Сохраняются пропорции изображения (соотношение сторон)
  • Изображение центрируется в центре страницы
  • Не появляются полосы прокрутки
  • По-возможности максимально кроссбраузерное решение
  • Без различных махинаций с флешэм

Отличный, простой и прогрессивный метод с использованием CSS

Мы можем решить нашу задачу с помощью чистого CSS, за что спасибо свойству background-size, которое появилось в CSS3. Нам понадобиться элемент html (лучше, чем использовать body, т.к. это не всегда полная высота окна браузера). Мы зададим фоновый рисунок элементу html, центрируем его, позицию выберем фиксированную (fixed) и скорректируем размер изображения с помощью свойства 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;
}

Работать такой вариант будет в:

  • Safari 3+
  • Chrome любой версии
  • IE 9+
  • Opera 10+ (Opera 9.5 поддерживает background-size, но не поддерживает cover)
  • Firefox 3.6+ (Firefox 4 поддерживает свойство background-size без приставки -moz)

Есть так же решение для IE, но будьте осторожно — есть мнение, что после его применения некоторые ссылки на странице не работают. Если такое случается — попробуйте применить этот код не к блокам html или body, а к блоку div, но с шириной и высотой 100%. Вот код:

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

Только CSS. Вариант №1

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

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 / Chrome / Opera / Firefox
  • IE 6: Работает — но есть проблемы с фиксированием изображения
  • IE 7/8: По большей части работает, но не центрирует на маленьких разрешениях, при этом заполняет экран полностью
  • IE 9: Работает

Только CSS. Вариант №2

Есть еще один довольно простой способ решить нашу задачу: использовать изображение на нашей страницу, задать ему фиксированную позицию в верхний левый угол и зададим min-height и min-width 100%, сохраняя соотношение сторон.


#bg {
        position:fixed;
        top:0;
        left:0;

        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
}

Тем не менее, это не центрирует изображение, что важно для нас. Мы можем решить эту проблему заключив изображение в блок div. Этот блок будет по размерам в 2 раза больше чем экран браузера. Когда же мы вставим изображение в этот блок, то оно будет находиться строго по центру окна браузера, сохранив при этом соотношение сторон.


#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 оба неправильно понимают этот код (неправильное позиционирование, не понятно почему)

Вариант с ипользованием jQuery

Идея смотрится проще, чем реализация на CSS, если учесть, что мы знаем что соотношение сторон изображения больше или меньше соотношения сторон окна браузера. Если изображение меньше, то нам достаточно установить ширину в 100% у изображения и мы будем знать, что оно заполнит экран полностью. Соответственно, если изображение больше, то нам достаточно будет установить высоту в 100% чтобы заполнить экран изображением. Мы будем использовать JavaScript, а точнее библиотеку jQuery.


#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");

});

скачать исходники

Не успеваете сдать отчеты в налоговую? Не хотите стоять в очередях? Тогда электронная отчетность в налоговую — ваш выбор. Заполни, проверь и отправь отчеты в интернете.

Оригинальная статья http://css-tricks.com/3458-perfect-full-page-background-image/



Запись опубликована в рубрике CSS3, JavaScript с метками , , , , , . Добавьте в закладки постоянную ссылку.

8 комментариев: Как растянуть фон на все окно браузера? Четыре простых решения на CSS и JavaScript. Свойство background-size

  1. Уведомление: Как растянуть фон на все окно браузера? | Grabr

  2. Димка говорит:

    спасибо, очень актуальная инфа

  3. Мих говорит:

    Кому не сложно!
    Напишите пожалуйста поподробнее, а то чет не получается. Вставляю в CSS ,все остается без изменений! Может есть какой-то нюанс. Куда что вставлять? Буду очень благодарен!

  4. Мих говорит:

    Вот так получилось:#background-wrap img {    z-index: -1;    /*max-height: 100%;*/    /*min-height: 60em;*/    width: 100%;    height: 100%;    position:fixed;}…сразу после ставим                

  5. Мих говорит:

    …сразу после body ставим             

  6. Гость говорит:

     

     Актуально?

    Ни то слово, для новичков в области дизайна, это просто
    клад!

    В виду малого опыта, у меня возник вопрос по поводу ХАКА в
    табличном способе:

    Поясните, пожалуйста, это случайная  лишняя запись?

    Если нет, тогда где папка ”js” со скриптами?

    Заранее благодарен за ответ.

  7. джоя говорит:

    Спасибо, единственный сайт, где нашла отличное решение без лишней воды! 5+

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *