Фон — это отличный способ добавить изюминку на сайт и придать стиля. Если он правильно подобран.

Но часто бывает так что хороший фон, оказывается очень крупного размера. Что печально сказывается на скорости сайта.

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

Есть одна фишка, которая позволяет решить обе проблемы разом — это делаем размытый фон, маленького размера, с покрытием всей страницы и фиксацией.

Для примера возьмем вот такую картинку

От сюда http://photodune.net/item/city/3419705

Берем элементарный Paint.Net и добавляем размытие. Сохраняем в png 8 бит.

Получаем

bg

Что мы видим:

1. Маленький размер

2. Стильный фон

3. И мало кто заметит что это платный семпл 🙂

Далее нужно добавить это в качестве фона. Но при обычных свойствах он просто встанет по середине или замостится плиткой. Оба варианта нам мало интересны.

Тут простой маневр, к тому элементу что привязывается эта картинка в качестве фона, нужно добавить свойство: background-size: cover;

Пример:

body.custom-background {
background-size: cover;
}

Это даст команду браузеру, растягивать картинку на весь размер элемента. Тем самым достигается очень стильный эффект, когда фон выгодно оттеняет сайт и создает эффект объема. Затираются не нужные артефакты. И ускоряется загрузка страниц за счет экономии трафика.