Растягиваем фон на всю страницу с помощью CSS

Задача: используя CSS растянуть фоновую картинку на весь экран соблюдая некоторые требования:
1. фон должен быть неподвижен и занимать всю площадь экрана
2. у изображения должны сохраняться пропорции
3. из-за фона не должно появляться скролов
4. работать во всех современных браузерах

Для начала давайте посмотрим демонстрацию

Растягиваем фон на всю страницу с помощью CSSВ демонстрации, чтобы оценить, что фоновая картинка ведет себя как мы и предполагали мы можем либо изменить масштаб браузера кнопками на клавиатуре Ctrl + "+" (зажмите контрл и нажмите кнопку плюс или минус) либо изменяя размер окна браузера. Фоновое изображение будет автоматически центрироваться, сохранять пропорции и занимать всю площадь экрана.

Рассмотрим теперь стили CSS. Фоновую картинку я прилепил к тегу body

body {background: url('bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

В общем-то это и все что надо сделать. Ключевой момент это свойство background-size: cover; которое говорит браузеру, что изображение по высоте и ширине должно поместиться в окно браузера. С помощью атрибута fixed мы указываем, что изображение неподвижно. Атрибуты center обозначает, что фон будет центрироваться по оси X и Y (центрировать посередине необязательно).

Если вы хотите что-то добавить, напишите, пожалуйста, ниже комментарий