При создании сайтов хочется даже фоном подчеркнуть тематическую направленность сайта, вставив в фон красивое изображение. При использовании фото в качестве фона, заставить изображение растягиваться без искажений довольно непросто, особенно если вы все еще заботитесь о пользователях немного устаревших браузеров.
Итак, у нас есть фото размером 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;
}