Как сделать большой фон для сайта через CSS
В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными. Оно и не удивительно – классно подобранный фон может послужить основным источником восприятия того или иного проекта,
ведь давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд. Предлагаю ознакомиться с несколькими CSS техниками для создания большого фонового изображения с использованием одного или двух изображений.
Перед тем, как начать, взгляните на наиболее распространенную ошибку:
Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).
Пример 1.
Самый простой способ избежать этой ошибки – сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:
Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста – вы «прижимаете» изображение фона к верху и центрируете его по центру.
Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:
body { padding: 0; margin: 0; background: #f8f7e5 url(изображение.jpg) no-repeat center top; width: 100%; display: table;}
Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).
Пример 2. Двойные изображения
В качестве примера используется сайт Design Jobs on the Wall. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.
В качестве большого изображения для фона используется картинка (в формате GIF) с прозрачным фоном, цвет которой максимально приближен к цвету BODY.
Пример 3. Небесный фон.
Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV – демо верстки можно глянуть здесь.
Кстати, данный пример можно реализовать и без DIV – смотрите код на демо странице2.
Внимание! Скачать все примеры можно здесь (зеркало).
Данный пост является переводом статьи – How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.
http://design-mania.ru
Как сделать большой фон для сайта через CSS - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.
