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

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

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

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

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

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

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

 

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