Как сделать большой фон для сайта через CSS

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

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

большой фон css

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

Пример 1.

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

css background

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

большой background

Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(изображение.jpg) no-repeat center top;
 
  width: 100%;
  display: table;
}

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

фон для сайта

Пример 2. Двойные изображения

Демо реализации можете глянуть здесь. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.

фон для сайта background

В качестве большого изображения для фона используется картинка (в формате GIF) с прозрачным фоном, цвет которой максимально приближен к цвету BODY.

css background для сайта

Пример 3. Небесный фон.

Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV – демо верстки можно глянуть здесь.

ксс фон для сайта

Данный пост является переводом статьи – How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.

P.S. Создаем лого Web 2.0 в GIMP – для любителей альтернативного софта.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 2 для поста Как сделать большой фон для сайта через CSS
  1. ]]> Tod ]]> (April 18, 2015)

    Павел, странно, вроде все работало ранее. Можете пройти по ссылкам на демо того или иного варианта реализации и подсмотреть код этих страниц. Демка для первого варианта находится тут.

  2. ]]> Николай ]]> (May 6, 2015)

    Спасибо Ваша статья очень помогла.

Оставить комментарий
для статьи Как сделать большой фон для сайта через CSS