Фон для сайта (свойство 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-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, дальше вас ожидает еще много интересных секретов!

А еще можно опубликовать ссылку на статью в своем блоге:

Оцените статью:

(голосов - 22, средний балл: 5.91 из 7)

Loading ...

Категории: Верстка;

Теги: css стили, веб-дизайн новичкам, верстка, оформление блога.

Похожие по тематике посты:

Комментариев - 44 для поста Фон для сайта (свойство CSS background)

]]> Денис Климонтов ]]> (August 30, 2008)

background-position: bottom right – в этой cтроке ошибка;)
]]> Tod ]]> (August 30, 2008)

Денис, спасибо, исправил:)
]]> Волотко Дмитрий ]]> (August 31, 2008)

url(“my-image.jpg “)
Из-за этого пробела Ослик может “забыть” показать картинку.
]]> Tod ]]> (August 31, 2008)

Ох уж этот осел:) Дмитрий, спасибо за наводку, подправил код.
]]> Суроегин ]]> (September 5, 2008)

Очень даже пригодился данный урок. Благодарю! ;)
]]> onwave ]]> (September 22, 2008)

Интересно, а какое само было изображение?! Хотелось бы тоже увидеть его))
]]> Tod ]]> (September 22, 2008)

Если вы о данном блоге, то изображение:
]]> garik ]]> (October 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;}

Подскажите, пожалуйста, никак не получается, сделать. Хочу, чтобы одно изображение заканчивалось, а второе изображение заливала все остальное. А получается сначала изображение на пол экрана, а дальше цвет.
]]> Tod ]]> (October 13, 2008)

garik, насколько мне известно, 2 изображения добавить никак не получится, разве что уже через HTML – создаешь разные слои и для каждого определяешь фон.
]]> TR@KTOR ]]> (October 28, 2008)

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

Здравствуйте, а как подписаться на rss у Вас?=)
]]> Tod ]]> (November 23, 2008)

Олями,кликнуть на большую черную иконку в верхнем правом углу сайта.
]]> boa_juice ]]> (February 8, 2009)

Спасибо, мне очень понравился ваш сайт
]]> Сергей ]]> (May 1, 2009)

Классно, мне понравилось меню ваше горизонтальное, как его сделать?
]]> Tod ]]> (May 2, 2009)

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

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

Спасибо, прекрасный блог о дизайне
]]> Олег ]]> (February 12, 2010)

Меня то же интересует этот вопросик что у Pashok
]]> Дмитрий ]]> (March 23, 2010)

Помогите пожалуйста, я пытаюсь задать фон для футера, но он обрезается при масштабировании страницы! Что делать?
]]> Хрис ]]> (April 3, 2010)

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

А как сделать изображение прозрачным?
]]> n1ght ]]> (April 25, 2010)

а как сделать flash фон????
думаю было бы очень красиво если бы фоном было swf-приложение.
]]> Alenka ]]> (June 20, 2010)

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

Флеха вместо фона, на мой взгляд немного громоздко, но попробуйте использовать z-index.
]]> Аза ]]> (July 4, 2010)

Я несовсем понял… а вот ну я захожу в панель управления потом шаблоны и в таблицу css? да?
]]> Esq ]]> (July 24, 2010)

SWF на фон легко ………..
]]> uzumi ]]> (August 4, 2010)

Полезно….
]]> Саша ]]> (June 4, 2011)

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

а как сделать что бы картинку в режиме repeat отступить от верхней границы, а то если repeat от отступы не работают
]]> fffffff ]]> (June 27, 2011)

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

спасибо за статью.
всё сказано по делу.
]]> Панченко Антон ]]> (July 14, 2011)

Спасибо за такое подробное разъяснение! Возьму на заметку =)
]]> Ben ]]> (August 4, 2011)

А как сделать меняющийся фон?! Чтоб картинка при каждом обновлении страницы менялась?!
]]> Tod ]]> (August 5, 2011)

Ben, тут без программирования и php не обойтись. Примера такого решения не встречал.
]]> Михаил ]]> (October 31, 2011)

Ладно фон мы поставили,но вот проблема его видно и там где находится контент, как этого избежать?
]]> Jaguar ]]> (November 15, 2011)

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

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

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

Вера, возможно при большом количестве посещений это “программное изменение” вылезет боком, я бы все же поискал решение через css хаки, если такое имеется.
]]> Александр ]]> (February 22, 2012)

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

Александр, точно подсказать не смогу, я бы поискал какой-то хак или готовое решение в интернете, думаю, в каком-то блоге можно найти.
]]> Дмитрий ]]> (April 20, 2012)

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

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

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