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

52 комментария к статье “Как сделать большой фон для сайта через CSS”
  1. !о :; очень полезная статья :: нужно будет обязательно попробовать ::

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

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

  3. W32Blaster

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

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

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

  4. Tod

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

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

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

  7. yura

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

  8. Tod

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    бла-бла-бла

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

    бла-бла-бла

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

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

  17. Tod

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

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

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

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

  19. Denai

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

  20. nikolay

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

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

  22. Tod

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

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

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

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

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

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

  26. Serega

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

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

  27. Tod

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

  28. Serega

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

  29. Tod

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

  30. Влад

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

  31. webmv

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

  32. Алена

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

  33. Георгий

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

  34. Данил

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

  35. бабушкин

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

  36. Tod

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

  37. Рустам

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

  38. Vova

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

  39. Andru

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

  40. Олег

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

  41. Владислав

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

  42. СкАйНеТ

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

  43. escobar

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

  44. Igor Rebega

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

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

  46. СoD

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

  47. Tod

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

  48. Анжела

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

  49. Tod

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

  50. Павел

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

    width: 100%;
    display: table;

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

  51. Tod

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

  52. Николай

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

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *