Изображение фона на весь экран с помощью CSS

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

Но есть способ, жертвуя поддержкой IE8 и ниже, реализовать это всего лишь несколькими строчками CSS кода.

Демо

Свойство background-size

С помощью background-size можно масштабировать изображение по заданным размерам. Согласно документации этого свойства (ссылка на htmlbook) оно может принимать значения cover и contain.

cover - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
contain - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Всё, что нам нужно установить фоновое изображения для HTML:

html{
    /* Это изображение отобразиться на всю страницу */
    background:url('background.jpg') no-repeat center center;

    /* Принудительно указываем высоту равную 100% от высоты окна браузера */
    min-height:100%;

    /* Магия */
    background-size:cover;
}

body{
    /* Для некоторых мобильных браузеров */
    min-height:100%;
}

Готово! Теперь изображение отображается на весь экран, даже при изменении размера окна браузера. Работает так же в IE9+.