Фон для сайта (свойство CSS background)

Фон для сайта (свойство CSS background)Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

background-color — задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

/* черный фон сайта */
body {
 background-color: #000;
}
 
/* черный фон заголовка, белый цвет шрифта */
h1 {
 color: #fff; 
 background-color: #000;
}

background-image — используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

body {
 background-color: #000;
 background-image: url ("my-image.jpg");
}

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

background-size — определяет размер фонового изображения.

div {
    background: url(my-image.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

background-repeat — используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

  • background-repeat: repeat-x — изображение повторяется только по горизонтали
  • background-repeat: repeat-y — изображение повторяется только по вертикали
  • background-repeat: repeat — изображение повторяется по горизонтали и вертикали
  • background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll — прокручивается вместе со страницей
  • background-attachment: fixed — при прокрутке фон остается неподвижным

background-position — задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Рассмотрим примеры:

  • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Например:

background: #000 url("my-image.jpg") no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

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

Комментариев - 81 для поста Фон для сайта (свойство CSS background)
  1. ]]> Денис Климонтов ]]> (Август 30, 2008)

    background-position: bottom right — в этой cтроке ошибка;)

  2. ]]> Tod ]]> (Август 30, 2008)

    Денис, спасибо, исправил:)

  3. ]]> Волотко Дмитрий ]]> (Август 31, 2008)

    url(«my-image.jpg «)
    Из-за этого пробела Ослик может «забыть» показать картинку.

  4. ]]> Tod ]]> (Август 31, 2008)

    Ох уж этот осел:) Дмитрий, спасибо за наводку, подправил код.

  5. ]]> Суроегин ]]> (Сентябрь 5, 2008)

    Очень даже пригодился данный урок. Благодарю! ;)

  6. ]]> onwave ]]> (Сентябрь 22, 2008)

    Интересно, а какое само было изображение?! Хотелось бы тоже увидеть его))

  7. ]]> Tod ]]> (Сентябрь 22, 2008)

    Если вы о данном блоге, то изображение:

  8. ]]> garik ]]> (Октябрь 13, 2008)

    body {background:#2765AF url(‘../images/body_bg.jpg’) repeat-x 0 0; color:#000000; margin:20px 0; padding:0; font-family:»Trebuchet MS», verdana, arial, «Times New Roman», serif; font-size:90%; }
    p {margin:0; padding:0 0 15px 0; }
    a {color:#000000; text-decoration:underline; }
    a:hover {color:#225799; text-decoration:none;}

    Подскажите, пожалуйста, никак не получается, сделать. Хочу, чтобы одно изображение заканчивалось, а второе изображение заливала все остальное. А получается сначала изображение на пол экрана, а дальше цвет.

  9. ]]> Tod ]]> (Октябрь 13, 2008)

    garik, насколько мне известно, 2 изображения добавить никак не получится, разве что уже через HTML — создаешь разные слои и для каждого определяешь фон.

  10. ]]> TR@KTOR ]]> (Октябрь 28, 2008)

    Делаем бэкграунд для body одним изображением (которое будет ниже), потом делаем тег div , ширина 100%, бэкграунд первое изображение (которое сверху), и уже в этот div размещаем все остальное содержимое.

  11. ]]> Олями ]]> (Ноябрь 23, 2008)

    Здравствуйте, а как подписаться на rss у Вас?=)

  12. ]]> Tod ]]> (Ноябрь 23, 2008)

    Олями,кликнуть на большую черную иконку в верхнем правом углу сайта.

  13. ]]> boa_juice ]]> (Февраль 8, 2009)

    Спасибо, мне очень понравился ваш сайт

  14. ]]> Сергей ]]> (Май 1, 2009)

    Классно, мне понравилось меню ваше горизонтальное, как его сделать?

  15. ]]> Tod ]]> (Май 2, 2009)

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

  16. ]]> Pashok ]]> (Май 25, 2009)

    Добрый день всем!
    Как сделать так, чтобы на заднем фоне флэха была. У меня сейчас сделана картинка в *jpg, а хочу *swf. Но когда это делаю, то swf’ка выше всего начинает отрисовываться, что не очень красиво, а задний фон становится чёрным, как в css и задано.

  17. ]]> Эрик ]]> (Август 18, 2009)

    Спасибо, прекрасный блог о дизайне

  18. ]]> Олег ]]> (Февраль 12, 2010)

    Меня то же интересует этот вопросик что у Pashok

  19. ]]> Дмитрий ]]> (Март 23, 2010)

    Помогите пожалуйста, я пытаюсь задать фон для футера, но он обрезается при масштабировании страницы! Что делать?

  20. ]]> Хрис ]]> (Апрель 3, 2010)

    можно-ли любое изображение полностью поместить на фон html(htm) не зависимо от размера и расширения изображения?
    так чтобы при открытии сайта лобой мог видеть фоновую картинку целиком, а не часть или даже несколько(дублирующихся)

  21. ]]> Даша ]]> (Апрель 4, 2010)

    А как сделать изображение прозрачным?

  22. ]]> n1ght ]]> (Апрель 25, 2010)

    а как сделать flash фон????
    думаю было бы очень красиво если бы фоном было swf-приложение.

  23. ]]> Alenka ]]> (Июнь 20, 2010)

    А у меня с размером проблема…=(( У меня высвечиваеться только маленькая часть картинки, а не вся(((
    Как это исправить?

  24. ]]> Ануар ]]> (Июнь 20, 2010)

    Флеха вместо фона, на мой взгляд немного громоздко, но попробуйте использовать z-index.

  25. ]]> Аза ]]> (Июль 4, 2010)

    Я несовсем понял… а вот ну я захожу в панель управления потом шаблоны и в таблицу css? да?

  26. ]]> Esq ]]> (Июль 24, 2010)

    SWF на фон легко ………..

  27. ]]> uzumi ]]> (Август 4, 2010)

    Полезно….

  28. ]]> Саша ]]> (Июнь 4, 2011)

    Скажите пожалуста как поставить на фон картунку ,тоесть у меня уже есть фон и я хочу добавить ищо одную фотку котория двигаетса вместе з прокруткой,а фон оставляетса на месте….ето я хочу зделать пиар одного сайта з картинкою(надо шоб когда нажимаеш на картинку она автоматически делала переадрысацию на тот сайт што я хочу!!!!подскажите плис

  29. ]]> сергей ]]> (Июнь 19, 2011)

    а как сделать что бы картинку в режиме repeat отступить от верхней границы, а то если repeat от отступы не работают

  30. ]]> fffffff ]]> (Июнь 27, 2011)

    Огромное спасибо вы супер автор темы вы млодец огромное спасибо только будьте добры после каждой указанной операцией над фоном побольше примеров ото я затруднился над тем как надо записать в html background-attachment: fixed – при прокрутке фон остается неподвижным но не беспокойтесь у меня получилось спасибо еще раз

  31. ]]> ____ROB____ ]]> (Июль 12, 2011)

    спасибо за статью.
    всё сказано по делу.

  32. ]]> Панченко Антон ]]> (Июль 14, 2011)

    Спасибо за такое подробное разъяснение! Возьму на заметку =)

  33. ]]> Ben ]]> (Август 4, 2011)

    А как сделать меняющийся фон?! Чтоб картинка при каждом обновлении страницы менялась?!

  34. ]]> Tod ]]> (Август 5, 2011)

    Ben, тут без программирования и php не обойтись. Примера такого решения не встречал.

  35. ]]> Михаил ]]> (Октябрь 31, 2011)

    Ладно фон мы поставили,но вот проблема его видно и там где находится контент, как этого избежать?

  36. ]]> Jaguar ]]> (Ноябрь 15, 2011)

    Я вот по поводу «background-attachment: fixed – при прокрутке фон остается неподвижным», у меня нет такого. У меня только body {background:url(‘/Graffika/fon8.jpg’); margin:0px; padding:0px;font-size:9pt;}. Вот как тут сделать что бы фон не прокручивался?

  37. ]]> Рустем ]]> (Ноябрь 22, 2011)

    Jaguar, вам следует заменить ваше свойство background:url(‘/Graffika/fon8.jpg’); на background: fixed url(/Graffika/fon8.jpg); (кстати я удалил кавычки — здесь они не нужны)

  38. ]]> Вера ]]> (Декабрь 3, 2011)

    Здравствуйте! а у меня вот какой вопрос: я знаю, что при работе с изображениями на сайте использую прием их предварительной загрузки, а вот если я захочу у какого-то дива менять background-image, присваивая ему программно то один, то другой класс, а оба эти класса заданы в css, то будет ли при этом временная задержка или все будет работать гладко как при предзагрузке

  39. ]]> Tod ]]> (Декабрь 4, 2011)

    Вера, возможно при большом количестве посещений это «программное изменение» вылезет боком, я бы все же поискал решение через css хаки, если такое имеется.

  40. ]]> Александр ]]> (Февраль 22, 2012)

    не могу добиться, чтобы задний фон сайта был неподвижным и не дублировался. чтобы страница сайта прокручивалась на неподвижном фоне. делаю, как в примере (background: #000 url(«my-image.jpg») no-repeat fixed left bottom;), но все равно не меняется. вот мой код, что в нем не правильного: background: url(../images/body_bg.jpg)no-repeat fixed;

  41. ]]> Tod ]]> (Февраль 22, 2012)

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

  42. ]]> Дмитрий ]]> (Апрель 20, 2012)

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

  43. ]]> Jaguar ]]> (Апрель 21, 2012)

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

  44. ]]> webmonstor ]]> (Апрель 30, 2012)

    подскажите а как одну картинку сделать для всех страниц сайта?? это я так понимаю через внешние таблицы

  45. ]]> Александр ]]> (Ноябрь 12, 2012)

    Не подскажите ли, можно ли поверх сделать еще и градиент? Предположим, у меня картинка для фона 50х50 точек, но я хочу, что в верхней части фона быоло темнее?

  46. ]]> Tod ]]> (Ноябрь 13, 2012)

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

  47. ]]> Александр ]]> (Ноябрь 13, 2012)

    В таком случае все равно придется грузить большую картинку. Хотелось бы этого избежать и сделать «малой кровью» то есть весом

  48. ]]> Tod ]]> (Ноябрь 15, 2012)

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

  49. ]]> Александр ]]> (Ноябрь 15, 2012)

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

  50. ]]> Andrey ]]> (Декабрь 14, 2012)

    Ага а на разных мониторах фикс д не фиксд а моя картинка фоном штмл то на текст наедет то в край монитора свлит!! когда контрл минус нажимаешь

  51. ]]> pikasso ]]> (Декабрь 30, 2012)

    Флеш фон положить под низ, свойствами html например можно — но хотелось бы узнать реально ли css способом рализовать? Насчет громозкости не факт! флеш фон вполне реально сделать до 150 килоб… если есть решение насчет css флеши… напишите!

  52. ]]> Людмила ]]> (Июль 2, 2013)

    Здравствуйте! Как сделать, чтобы на фоне была одна картинка , а не несколько продублированных копий?Заранее спасибо!

  53. ]]> Tod ]]> (Июль 2, 2013)

    Людмила, посмотрите статью Как сделать большой фон для сайта через CSS — должно пригодиться.

  54. ]]> Александр ]]> (Июль 30, 2013)

    Нужно изменить цвет фона виджета, с черного на другой цвет. Как?
    Заранее благодарен!

  55. ]]> Tod ]]> (Август 1, 2013)

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

  56. ]]> Tom ]]> (Август 29, 2013)

    Спасибо, благодаря вам начинаю учить язык.

  57. ]]> Лома ]]> (Октябрь 8, 2013)

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

  58. ]]> Tod ]]> (Октябрь 8, 2013)

    Лома, попробуйте посмотреть вот эту статью.

  59. ]]> Андрей ]]> (Ноябрь 7, 2013)

    приветствую уважаемые. такой вот замарочь задумал. может кто помнит в ранних версиях винды была такая фишка называлась помоему актив десктоп, тоесть можно было на рабочий стол установить веб елемент(флэш хтмл страницу и т.д.) теперь ближе к теме есть страница на локальном компе(делаю как менюху) хотелось бы средствами CSS и Html добиться меняемого фона данной страницы причём не авто а чтобы вибирать самому, жмяк по баттону допустим

  60. ]]> Tod ]]> (Ноябрь 7, 2013)

    Андрей, не знаком с такими тонкостями html, но думаю что-то подобное сделать можно. Гуглить надо, как всегда)

  61. ]]> Aurora ]]> (Январь 8, 2014)

    добрый день помогите пожалуйста Как сделать так чтоб фотка по сторонам была и в шапке …. а центр белый ?

  62. ]]> Tod ]]> (Январь 9, 2014)

    Aurora, к сожалению, готовое решение не знаю, нужно гуглить. Хотя, возможно, вам пригодится эта статья.

  63. ]]> Константин ]]> (Апрель 2, 2014)

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

  64. ]]> Елена ]]> (Апрель 18, 2014)

    Здравствуйте! Подскажите пожалуйста почему этот стиль работает только в хромоподобных браузерах? Как заставить его, работать на других?

    .article .article-content img {max-height: 95% !important;
    }

  65. ]]> Tod ]]> (Апрель 18, 2014)

    Елена, к сожалению, ответа на ваш вопрос не знаю) Нужно искать какие-то хаки дабы работало во всех.

  66. ]]> Алексей ]]> (Май 27, 2014)

    День добрый!!! Не подскажите, делаю в css все как написано. но фон остается не изменый, рисунок не вставляется.

  67. ]]> Tod ]]> (Май 27, 2014)

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

  68. ]]> Maxis ]]> (Сентябрь 11, 2014)

    Заходите в Маин — потом в style — body {
    margin:0 auto;
    padding-top:0px;
    background:#02070F url(/uploads/brillo5.jpg) repeat top ;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#666;
    font-size:13px;
    }

  69. ]]> Kristeen ]]> (Октябрь 11, 2014)

    А что насчет background-size?
    Добавьте, это же полезная штука :)

  70. ]]> Tod ]]> (Октябрь 12, 2014)

    Kristeen, добавил в статью информацию о background-size (пост достаточно давно создавался).

  71. ]]> Дима ]]> (Ноябрь 20, 2014)

    Скажите пожалуйста, а если я хочу вставить одну картинку на сайт, что бы она не повторялась, но если поставлю размер 100 100, то она будет слишком растянута. Можно ли как-то это исправить?

    И ещё такой вопрос. Я хочу сделать допустим, что бы было не одна картинка, что бы не растянута, а по бокам. Скидываю пример в виде картинки, только я хочу только одна линия справа и слева, и что бы больше ничего не выпирало. Помогите пожалуйста.
    http://s019.radikal.ru/i628/1411/eb/4d4d02a2fc05.jpg

  72. ]]> Tod ]]> (Ноябрь 21, 2014)

    Дима, если для фона нужна одна сплошная картинка, то об этом читайте здесь. Хотя, если я правильно понял, вам больше подойдет эта статья — там картинка+фон.

  73. ]]> Дима ]]> (Ноябрь 30, 2014)

    Tod, спасибо большое за ответ, очень помогло!
    Теперь проблемка следующая..
    Подскажите пожалуйста, как можно сделать красивой мою галерею на сайте mirmaze.com
    Меня очень напрягает это окошко белое во всех 4 категориях, можно ли его полностью убрать, или хотя бы поменять цвет, что бы красиво было. Я заходил в настройки, оно называется окно Space, и какую я бы цифру там не ставил, даже при 0 все-равно это окошко оставляется. Возможно, есть совершенно другие пути сделать эту галерею красивой. Подскажите, пожалуйста..

  74. ]]> Дима ]]> (Ноябрь 30, 2014)

    Так же хочу спросить, как в новостях можно продлить беграунд?
    Например, зайдите пожалуйста на сайт mirmaze.com и посмотрите раздел новости, в первое новости с ним всё хорошо, а вот во второй внутри уже фотографии вылазят. Как это исправить,подскажите пожалуйста.

  75. ]]> Tod ]]> (Декабрь 1, 2014)

    Дима, вообще глобально варианты оформления для сайта можно попытаться подправить в CSS стилях, но тут ситуация, походу, иная. На сайте используется система Joomla, подозреваю, что для галереи там есть соответствующий модуль. Вам нужно поискать в сети информацию именно про «галерею в Joomla» — думаю, должны быть какие-то настройки.

  76. ]]> Lexa ]]> (Апрель 9, 2015)

    Использовал ваши подсказки на моем проекте спс.

  77. ]]> 7enny ]]> (Июнь 5, 2015)

    Привет! какой css у этого сайта для бэкграунда? promodj.com
    хочу у себя так же- прокручивает часть и потом градиентом в белый

  78. ]]> Tod ]]> (Июнь 5, 2015)

    7enny, можете сохранить страницу сайта на рабочий стол и там посмотреть css стили, а можете через меню «Исследовать элемент», всплывающее при клике правой кнопки мышки в браузере. Кстати, про использование большой фоновой картинки можно почитать тут.

  79. ]]> owl ]]> (Август 3, 2015)

    Спасибо большое часть с «background-size: 100% 100%;» мне помогла в моем случае.Я использовал contain или cover но при увеличении или уменьшение странницы все «ломалось».

  80. ]]> Stayer ]]> (Декабрь 17, 2015)

    Здравствуйте,каким образом залить фоном главную страницу так чтобы он не заливал текст…
    Как бы таблица с контентом была поверх заливки.
    Проблему заливки белого фона вокруг шапки и контента решаю с помощью фотошопа накладываю картинку с созданным фоном ….но это не то…((

  81. ]]> Tod ]]> (Декабрь 18, 2015)

    Stayer, если честно, немного не понял что именно нужно. В CSS стилях для определенного объекта body, div блока контента и др. прописываете свойство background. Фон всегда отображается под текстом. Картинка с белым фоном — это вообще не то. Картинка грузится на сайте долго и это не корректно. Попробуйте применить примеры кода, указанного в статье.
    P.S. Либо уточните вопрос, возможно, я не правильно вас понял.

Оставить комментарий
для статьи Фон для сайта (свойство CSS background)