Бэкграунды и фоны для сайта

Сегодня мы рассмотрим несколько способов размещения большой картинки, на заднем фоне нашего сайта. Для самых нетерпеливых, я разместил пример на отдельной странице сайта fonforsite.ru

Для примера мы воспользуемся готовыми наработками вэб-дизайнеров и картинкой 640 x 425 *.jpg.

Образец CSS годится для случая, когда HTML-элемент занимает всю высоту окна браузера.

html {
    background:url('picture.jpg') no-repeat center center;
    min-height:100%;
    background-size:cover;
}
body {
min-height:100%;
}

Другой способ будет выглядеть покомпактнее

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

Кому хочется разнообразия и более продвинутых способов растяжения картинки на весь экран браузера, можем предложить еще четыре довольно несложных метода, построенных на CSS (и один метод с применением jQuery), которые вы можете взять в этом архиве.

В архиве есть 10 больших красивых картинок для бэкграунда вашего сайта.

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