Как сделать большой фон для сайта через 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        

Комментариев - 52 для поста Как сделать большой фон для сайта через CSS
  1. ]]> Vivad ]]> (Ноябрь 4, 2008)

    !о :; очень полезная статья :: нужно будет обязательно попробовать ::

  2. ]]> Yohan ]]> (Ноябрь 5, 2008)

    А я уже встречал эту статью, на английском правда… :)

    Дизайн блога в первом примере похож на дизайн моего блога… точнее наоборот :)

  3. ]]> W32Blaster ]]> (Ноябрь 7, 2008)

    хай! Вот с этим не согласен:

    «Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY).»

    Мне один оооочень талантливый верстальщик-дизайнер-прогер говорил, что лучше использовать для повторяющегося фона полоску в 10-15 пикселей, потому что он будет быстрее грузиться браузером, нежели тонка полоса в 1 пиксель. Совет на будущее.

  4. ]]> Tod ]]> (Ноябрь 7, 2008)

    W32Blaster, интересное мнение! Признаться сталкиваюсь с ним впервые, но звучит логично.

  5. ]]> Robin ]]> (Ноябрь 7, 2008)

    Я солидарен с W32Blaster полоска в один пиксель «попахивает» маразмом до чего нужно быть жадным, чтобы 100КБ пожалеть

  6. ]]> Сергей ]]> (Ноябрь 8, 2008)

    Если градиент сохранён в jpg — то лучшая его ширирна 8 px. Обусловлено алгоритмом сжатия jpeg. Если больше или меньше хотя бы на пиксель — объём будет больше, а качество ниже.
    А для gif — разница в размере файла 1 px и 15 px будет не существенна.

  7. ]]> yura ]]> (Ноябрь 21, 2008)

    Почему у тебя не все пункты в меню активны???

  8. ]]> Tod ]]> (Ноябрь 21, 2008)

    yura, не совсем понял вопрос — о каких пунктах меню речь?
    Если в меню, то просто о некоторых темах еще не писал.

  9. ]]> gravitacia ]]> (Ноябрь 25, 2008)

    Мнение о вреде заполняющей полоски 1px интересно. Не знаю, где сейчас актуальна такая проблема, возможно, в телефонах и смартфонах. Да, если у вас очень слабый процессор, очень мало оперативки и вы любите открывать сразу пару десятков ссылок — тогда для вашего компьютера действительно сложно будет заполнять фон тонкими полосками. Но тогда большинство флэш-баннеров у вас тоже будет показывать, как слайд-шоу, потому что сейчас принято делать скорость от 40 кадров в секунду и выше.

    Если фон можно порезать на полоски шириной 1px, это нужно делать. И никакого сохранения в JPEG — этот формат всегда сохраняет с потерей качества. Если на полоски в один пиксель порезана не фотография (ну мало ли), она должна быть сохранена в GIF. Вес картинки гиф зависит от количества цветов на изображении и сжатие происходит за счет уменьшения их количества. Даже градиенты лучше сохранять в гиф — не будет разводов на фоне.

  10. ]]> W32Blaster ]]> (Ноябрь 25, 2008)

    Не совсем согласен с gravitacia. Градиент лучше сохранять в PNG, потому что у них есть алгоритм сжатия для градиентов и даже можно попробовать на практике — градиент в PNG займёт меньше, чем в GIFе или в JPG. Да и по качеству получше будет.

    А на счёт быстродействия компов — очень многие пользователи сидят на ноутах. Какой-бы навороченный лапик не был бы, всё равно он будет уступать стационарке и быстродействие будет хуже. Во всяком случае, если говорить про ноуты средней ценовой категории. А там всё же нужно заботится о том, как быстро твой сайт загружается. Так что не нужно пренебрегать оптимизацией своей странички.

  11. ]]> gravitacia ]]> (Ноябрь 25, 2008)

    w32blaster, я тоже люблю PNG, но применять его нужно достаточно осторожно: IE6, который входит в самую популярную версию винды, не поддерживает альфа-прозрачность. Начинающий вестальщик, который обновил свой эксплорер до 7й версии и просмотрел его 3й мозилой, просто не узнает, что его креативная полупрозрачность половине посетителей попроще кажется серым фоном. В комменте не получится описать все тонкости сохранения картинок при верстке, отдельная статья нужна. Спасибо за идею. напишу в своем блоге, как время появится.

    По поводу слабых ноутов… Когда в шапке тяжелая активная флэшка, сбоку колонка флэшевых баннеров, выпадающее джаваскриптовое меню и аяксовые комменты — абсолютно безразлично, фон сделан шириной в 1пх или 20пх. На заполнение фона потратится миллионные доли процента производительности ноута по сравнению с проигрыванием одного флэш-баннера. Это вопрос чисто теоретичский, так как пользователей с Pentium II и широкополосным интеренетом крайне мало

  12. ]]> W32Blaster ]]> (Ноябрь 25, 2008)

    gravitacia, постой-постой, а никто и не говорил про прозрачность PNG! Речь шла о градиентной заливке фона! Тут никаких проблем нету с прозрачностю, с которой, кстати, я столкнулся совсем недавно. Решается она встраиванием простым JS-файликом (я написал на своём ЖЖ об этом). Но я прекрасно понимаю, что это не панацея. Так что если мы говорим о прозрачности, то нужно очень чётко понимать, какой формат тебе нужен. Если можно ограничиться ГИфом, то лучше использовать его. В случае про градиентный фон — всё верно: ПНГ занимает меньше места, чем ГИФ.

  13. ]]> gravitacia ]]> (Ноябрь 25, 2008)

    Встраивать простой JS-файлик, чтобы показать прозрачность в PNG? :) Да уж, вы легких путей не ищете :).

    Градиентную заливку запросто можно делать с альфапрозрачностью. Часто ее так делают дизайнеры в фотошопе, начинающий верстальщик же, по аналогии со слоями PSD, вместо объединения слоев, может создать слой с градиентом от цвета к прозрачности. Увидев, что такой градиент сохраняется и хорошо отображается в ПНГ через мозилу или оперу, он будет его использовать дальше. Пока заказчик не покажет ему его сайт в IE6.

    Любовь к PNG похвальна, но рекомендовать его использование вместо GIF новичкам не стоит. Потому что будут проблемы, о которых я писал выше. Если человек знает, что делает, конечно, PNG во многих случаях лучше. Но вряд ли данная статья расчитана на профи

  14. ]]> W32Blaster ]]> (Ноябрь 25, 2008)

    А вы знаете способ заставить показывать ИЕ6 не через JS? Поделитесь? Можно через CSS, но там всё равно будет обращение к одной и той же либре и, насколько я знаю, через JS проще. Ну во всяком случае, я нарыл в нете только такой способ. Поделитесь знаниями :)

    И ещё такой вопрос: какой смысл использовать альфа-прозрачность для градиентного фона? Почему б просто не вставить грамотно нарисованный градиент как обычную картинку? Ну так, как описано в статье? Исключением будет тот случай, если у нас заливка идёт не горизонтальная, а вертикальная. Скажем, ореол вокруг рамки-контейнера. Тут всё понятно. А если случай такой же, как в примерер 3 выше (с небом) — разве имеет смысл включать альфа-прозрачность?

  15. ]]> gravitacia ]]> (Ноябрь 25, 2008)

    w32blaster, все гениальное — просто. Верстка должна быть максимально простой и однозначно трактуемой браузерами. Чем более «новые» и модные средства применяются, тем больше вариантов вашего сайта увидят посетители. Качественная верстка — это когда сложный макет сделан максимально простыми и понятными средствами. А вот чтобы обойтись простыми средствами и нужен опыт. Это было лирическое отступление :)

    А по сути вашего вопроса: при верстке нельзя использовать альфа-прозрачность. И еще лет 5 нельзя будет точно, пока кто-то не создат операционку популярнее, чем WinХР. В большинстве случаев, как вы и говорили, достаточно не наслаивать картинки одна на другую, а объединить слои и вставить одну картинку. Но если так сделать нельзя (например, логотип компании с тенью или свечением должен «плавать» по центру шапки при резиновой верстке по неоднородному фону), логотип можно сохранить в GIF. С тенями, но на прозрачном фоне. При этом альфа-прозрачность будет приеобразована в цвет, который можно задать при сохранении файла GIF или PNG8 в Фотошопе — параметр Matte(по умолчанию этот цвет белый). Помогает во многих случаях.

    А если не помогает — можно сохранить всю проблемную область одной сплошной картинкой, вставить ее ка фон и при сжимании она будет просто обрезаться по бокам. А на лого наложить полностью прозрачную гифку нужного размера и уже эту картинку делать ссылкой — логотип станет кликабельным, качество не потеряем, все сделано простыми средствами, загружается максимально быстро и понимается однозначно.

  16. ]]> W32Blaster ]]> (Ноябрь 25, 2008)

    Так вы на вопрос и не ответили по поводу излечения IE6. Лично я встречался с двумя примерами:
    1) просто вставить JS-файлик и он сделает всё сам.
    2) в CSS применить следующее:
    <!—[if lte IE 6]>—>

    бла-бла-бла

    filter: expression(”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+
    this.firstChild.src+”‘, sizingMethod=’image’)”);

    бла-бла-бла

    Наскока я знаю, эти два способа всё равно действуют одинаково, так как образаются к одной и той же библиотеке, поэтому разницы особой нет. Если неправ — поправьте.

    А вы знаете более простые методы?

  17. ]]> Tod ]]> (Ноябрь 25, 2008)

    Ого дискуссия пошла:) Нешуточная.

    W32Blaster, в последних сайтах я встрачаю вариант2 — добавляется еще один файлик ie6.css, который подключается с условием <!—[if IE]> … <![endif]—>, а в нем уже прописывается filter: expression.

    В принципе, ничего сложного в этом не вижу. Тут главное один раз найти решение, а потом его использовать.

  18. ]]> gravitacia ]]> (Ноябрь 25, 2008)

    w32blaster, я описывал не один из ваших способов, а третий: как решить проблему альфа-прозрачности без скриптов. По поводу ваших способов я ничего сказать не могу — я никогда не делал ничего подобного. Мне очень редко приходилось прописывать код отлельно для какого-то браузера, обычно, мой код однозначно понимается.

  19. ]]> Denai ]]> (Март 6, 2009)

    неплохая статья, спасибо!

  20. ]]> nikolay ]]> (Июнь 1, 2009)

    спс. хорошая статья. только вопрос — а что делать если при добавлении фонового изображения сайт начинает притормаживать при прокрутке вниз ?

  21. ]]> nikolay ]]> (Июнь 5, 2009)

    и при прокрутке вверх кстати тоже :)

  22. ]]> Tod ]]> (Июнь 5, 2009)

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

  23. ]]> nikolay ]]> (Июнь 7, 2009)

    27 килобайт изображение весит

  24. ]]> создание сайтов ]]> (Сентябрь 3, 2009)

    А еще можно приделывать к правому краю, не обязательно по центру, это полезно, когда вставляешь dif с файлом png.

  25. ]]> кирилл ]]> (Ноябрь 24, 2009)

    nikolay, если у вас браузер опера, то возможно вы масштаб страницы сделали 90%, У МЕНЯ К ПРИМЕРУ страница именно в этом случае прокручивается с тормозами

    и еще у меня ВОПРОС:

    как можно прописать в css чтоб фон задавался так:
    картинка сверху
    фон из цвета
    картинка снизу
    ?
    буду очень признателен за ответ

  26. ]]> Serega ]]> (Февраль 7, 2010)

    В качестве примера используется сайт Design Jobs on the Wall. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код

    Подскажите пожалуйста как это сделать, как поместить gif картинку в слой div
    пример кода может быть? м?…

  27. ]]> Tod ]]> (Февраль 8, 2010)

    Serega, можно зайти на их сайт (Design Jobs on the Wall) и посмотреть как все сделано.

  28. ]]> Serega ]]> (Февраль 8, 2010)

    Ага, можно тока браузер код пишет по своему.
    Просто понять не могу. Этот рисунок, он вроде и фон и проявляется полностью, даже там где нет текста, по бокам например. Как это сделано

  29. ]]> Tod ]]> (Февраль 9, 2010)

    Serega, так вроде бы в посте есть пример, где для фона используется
    background: #f8f7e5 url(изображение.jpg) no-repeat center top;
    Оно и красит фон в цвет выбранный и добавляет картинку.

  30. ]]> Влад ]]> (Март 7, 2010)

    хм…во втором примере, В IE фон будет тупо отображаться (из-за прозрачности)

  31. ]]> webmv ]]> (Март 13, 2010)

    Я всегда таким способом работал, только фон лучше искать такой, чтобы меньше весил))

  32. ]]> Алена ]]> (Апрель 7, 2010)

    Описываете полезные вещи и простыми примерами, понятными всем, СПС! Самое сложное при задании фона на зацентренную верстку сайта. Необходимо мало того сделать оптимальным вес изображения, но сделать так, чтоб совподал рисунок по бокам. Я работала например на сайтом evitann точка ру. Было не просто, лично для меня.

  33. ]]> Георгий ]]> (Май 18, 2010)

    Скажите лучше, как подобрать цвет, чтобы цвет фона и полоски совпадали, а не была полоска на порядок светлее или же темнее… нужно что-то типо пипетки, как в фш

  34. ]]> Данил ]]> (Июль 2, 2010)

    У меня такой вопрос, мне хочется сделать шапку, в ней хочу сделать 3 фона слева, справа, по центру. те ширена левого и правого фона 125, по центру 200, у всего остольного пространтсва цвет фона #fff. пожайлуста подскажите решение

  35. ]]> бабушкин ]]> (Сентябрь 17, 2010)

    Design Jobs on the Wall взломан=)

  36. ]]> Tod ]]> (Сентябрь 18, 2010)

    бабушкин, посмотрел, вроде все нормально.

  37. ]]> Рустам ]]> (Октябрь 5, 2010)

    2 строчки помогли. =)

  38. ]]> Vova ]]> (Ноябрь 5, 2010)

    Очень полезная статья

  39. ]]> Andru ]]> (Ноябрь 18, 2010)

    Как сделать фиксированное фоновое изображение при масштабировании страницы?, как тут — samsung.com/ru/

  40. ]]> Олег ]]> (Январь 4, 2011)

    Блин,Спасибо!Как раз искал,то что нужно.

  41. ]]> Владислав ]]> (Апрель 3, 2011)

    Очень интересная и полезная статья) помогла мне сделать прекрасный задний фон! )спасибо!)))

  42. ]]> СкАйНеТ ]]> (Июнь 20, 2011)

    Помогите пожалуйтата сделать двойное изображение! Как это осуществить? И возможно ли сделать тройное?

  43. ]]> escobar ]]> (Сентябрь 18, 2011)

    Спасибо большое, очень полезно.

  44. ]]> Igor Rebega ]]> (Июнь 4, 2012)

    Учень увлекательная статья))

  45. ]]> Михаил ]]> (Июнь 12, 2012)

    Спасибо. Давно искал как сделать фон на сайте. Сейчас попробую

  46. ]]> СoD ]]> (Июль 18, 2012)

    хорошая статья. только вопрос – а что делать если при добавлении фонового изображения сайт начинает притормаживать при прокрутке вниз ?
    за ранее спасибо!

  47. ]]> Tod ]]> (Июль 19, 2012)

    СoD, если все дико тормозит — я бы отказался от такого решения в пользу более простого варианта.

  48. ]]> Анжела ]]> (Январь 24, 2015)

    Не подскажите как сделать задний фон на отдельном материале сайта

  49. ]]> Tod ]]> (Январь 26, 2015)

    Анжела, это зависит от движка, который использует сайт. Вам нужно будет для определенной страницы сайта добавить в BODY какой-то класс и для этого класса через CSS определить другую картинку.

  50. ]]> Павел ]]> (Апрель 18, 2015)

    Не работает код

    width: 100%;
    display: table;

    Все равно фон уменьшается при изменении окна браузера..

  51. ]]> Tod ]]> (Апрель 18, 2015)

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

  52. ]]> Николай ]]> (Май 6, 2015)

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

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