Фон, который всегда растягивается на всю страницу

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

Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.

Вот требования к решению:

  • Заполнять изображением всю страницу без пробелов.

  • Масштабировать изображение, если нужно.

  • Сохранять пропорции изображения.

  • Изображение центрируется на странице.

  • Изображение не создает никаких полос прокрутки.

  • Кросс-браузерное решение по возможности.

  • Не использовать никаких сторонних технологий, например, Flash.

 

sourse

Удивительный, простой и прогрессивный метод CSS3

Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size. Мы используем элемент 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;
}

Работает в:

  • Safari 3+

  • Chrome

  • IE 9+

  • Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)

  • Firefox 3.6+

Смотрим демонстрацию использования CSS3.

 

Техника с использованием только CSS. Часть #1.

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

Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации  процентного значения свойства left  и отрицательного значения для левого поля, чтобы центрировать фоновое изображение.

Вот код CSS:

img.bg {
        /* Устанавливаем правила для заполнения фоном */
        min-height: 100%;
        min-width: 1024px;

        /* Устанавливаем коэффициент пропорциональности */
        width: 100%;
        height: auto;

        /* Устанавливаем позиционирование */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Работает в:

  • Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

  • IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.

  • IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

  • IE 9: Работает.

Смотрим демонстрацию использования CSS. Часть 1.

 

Техника с использованием только CSS. Часть #2.

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

<img src="images/bg.jpg" id="bg" alt="">

 

#bg {

        position:fixed;

        top:0;

        left:0; 



        /* Сохраняем коэффициент пропорциональности */

        min-width:100%;

        min-height:100%;

}

Однако так изображение не центрируется. Поэтому обернем изображение в элемент <div>. Данный <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 отказываются работать с данным способом (неправильное позиционирование изображения).

Смотрим демонстрацию использования CSS. Часть 2.

 

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент <img> будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

<img src="images/bg.jpg" id="bg" alt="">

 

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

 

$(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+ (с заглушками, вероятно, будет работать и в IE6)

  • Во всех остальных браузерах.

Смотрим демонстрацию метода с использованием jQuery.

 

Заключение

Любой из методов решения имеет свои достоинства и недостатки. Нужно просто выбрать подходящее для конкретного случая. Ну, или предложить свое.

В качестве бонуса предлагается еще одна демонстрация работы с фоном при использовании таблицы.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/perfect-full-page-background-image/
Перевел: Сергей Фастунов
Урок создан: 14 Декабря 2010
Просмотров: 123987
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^