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

Итак, у нас есть фото размером 900 х 600, которое нужно сделать фоном страницы (Рис.1).

Рис.1. Фото для фонового изображения

Для решения таких задач я смело использую CSS3. Ведь нормальные браузеры типа Google chrome или Mozilla Forefox полноценно поддерживает технологию, а после недавних событий о прекращении поддержки браузеров Internet explorer (см. Microsoft перестает поддерживать Internet Explorer) я вообще перестал считать целесообразным ориентироваться на браузеры без поддержки CSS3.

Суть метода – установить размер изображения фона с помощью свойства background-size значению cover. Рекомендую прописать background и установить свойство background-size для тэга html, ибо он точно всегда соответствует всей области экрана.

        html {
            background: url(images/IMG_1214.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

Посмотреть демо