Назад Скрипты Добавить материал
Большое фоновое изображение
Фото / яндекс
Просмотров 3073
В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными.

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

Перед тем, как начать, взгляните на наиболее распространенную ошибку:


Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).

Пример 1.

Самый простой способ избежать этой ошибки – сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:


Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста – вы «прижимаете» изображение фона к верху и центрируете его по центру.

Код для примера выглядит так:



Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).



#bigbro
avatar
Используются технологии uCoz
Яндекс.Метрика