Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Background в CSS (color, position, image, repeat, attachment) для задания цвета фона или фоновой картинки Html элементов

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы рассмотрим пять CSS правил, которые позволяют задать фон для любого элемента в Html — background-position, background-image, background-repeat, background-color и background-attachment. Ну, и про составное правило Background тоже не забудем упомянуть. Ничего сложно в этом нет, но есть определенные тонкости и нюансы, которые необходимо знать и учитывать при верстке или правке уже готового шаблона (помните про Firebug, который поможет открыть всю подноготную любого дизайна).

Еще раз напомню, что данная статья входит в серию под названием Справочник CSS и лучше всего будет начинать изучение стилевой разметки сначала, а именно со статьи про то, что такое CSS и с чем его едят, ну, а дальше следовать в порядке заданном в справочнике. Хотя, в любом случае решать вам, а сейчас давайте поговорим все же про задание фона в таблицах каскадных стилей и про «волшебное» правило background.

Color, background-color и background-image

Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color. На самом деле тут все просто. Синтаксис совершенно обычный и цвет в Css вы можете задавать в соответствии с тем, как это делали в языке Html. Как вы помните, в Html цвета можно задавать с помощью шести цифр поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).

Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:

color:#303

Для примера я окрасил этот маленький абзац (Html теги абзаца) в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев, который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через Css правило color это довольно просто, а вот с фоном будет немного посложнее.

Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное правило Background. Чтобы их увидеть вы можете перейти на страницу текущей спецификации CSS консорциума W3C и поискать все имеющиеся там правила со словом Background:

1. background color — с помощью этого правила задается цвет фона для любого Html элемента. Для задания цвета можно использовать либо код, либо название цвета, т.е. все в точности так, как и было при простом задании цвета в CSS с помощью правила color.
2. background image — с помощью этого CSS правила можно в качестве фона использовать картинку, путь до которой будет указан в функционале url (). Путь можно указывать в Url как относительный, так и абсолютный. Использование фоновой картинки вовсе не запрещает вам одновременно использовать фоновую заливку цветом с помощью background-color. Эти CSS правила не являются взаимоисключающими.
3. background repeat — можно задать повторение картинки либо только по горизонтали в один ряд, либо только по вертикали, либо вообще запретить повторение фоновой картинки.
4. background position — позволяет точно задать позицию фоновой картинки как в процентах, так и в абсолютных величинах
5. background attachment — позволяет выбрать тип привязки точки отсчета при позиционировании фоновой картинки: либо относительно конкретного Html элемента, либо относительно области просмотра (видимой на экране компьютера области веб страницы).

Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью CSS (КСС) селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью атрибута Style).

Если вы заглянете в спецификацию CSS, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах Html форм (select, input) цвет фона по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных элементов языка гипертекстовой разметки.

Цвет фона в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):

background-color:#FEFCDE

Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.

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

Если вы посмотрите в спецификацию языка стилевой разметки, то увидите, что для background-image по умолчанию используется значение «none» (т.е. никакой фоновой картинки не используется). Ну, а если фоновая картинка все же нужна, то в функционале url () вам нужно будет указать до нее путь:

background-image:url(http://ktonanovenkogo.ru/navigator/comment_top_focus.gif);

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

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

Background-repeat — повтор фоновой картинки

Да потому, что мы не прописали никакого значения для CSS правила background-repeat, а значит для него будет использоваться то значение, которое принято по умолчанию. Заглянув в спецификацию CSS мы узнаем, что это значение соответствует «repeat» (повтор фонового изображения по всем осям). Ответ нашелся сам собой.

Следовательно, с помощью CSS правила background-repeat мы сможем управлять повторениями фоновой картинки. У этого правила может быть только четыре значения:

1. repeat — задает повтор фоновой картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле background repeat не нужно
2. repeat-x — фоновая картинка будет повторяться только по горизонтали и получится в результате только одна строка с повторяющимся фоновым изображением. Не забудьте, что правило background-repeat не будет работать, если вы не задали в правиле background-image путь до фоновой картинки:

   background-image:url(http://ktonanovenkogo.ru/image/rss_no_drop1.png);
   background-repeat:repeat-x;

   
3. repeat-y — фоновое изображение будет повторяться только по вертикали (получится один столбец из фоновой картинки):
   
4. no-repeat — фоновая картинка вообще не будет повторяться и мы получим ее изображение в левом верхнем углу области того Html элемента, для которого фоновое изображение используется:
   

Background-position — CSS правило для позиционирования фоновой картинки

Теперь возникает вопрос, а можно ли фоновую картинку отодвинуть от левого верхнего угла области ограничивающей размер Html элемента. Конечно же можно и для этой цели служит отдельное CSS правило background-position:

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

Так же из спецификации видно, что для позиционирования фоновой картинки с помощью CSS правила background-position можно использовать как относительные (проценты), так и абсолютные величины (например, пикселы или другие единицы размеров применимые в CSS). Ну, а так же можно использовать слова, которые будут соответствовать определенным цифровым значениям. Но обо все по порядку.

При задании позиционирования фоновой картинки с использованием абсолютных единиц в background-position (например, пикселей) имеет место быть следующий принцип определения итогового положения изображения:

Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется фоновое изображение, до начала координат этого самого изображения. Например, в этом абзаце я позиционировал фоновое изображение через background position с помощью следующих CSS правил:

background-image:url(http://ktonanovenkogo.ru/image/logo.png);
background-repeat:no-repeat;
background-position:400px 25px;

Т.е. значок счетчика Ливинтернет отстоит на 400 пикселов по горизонтали от левого края абзаца и на 25 пикселей по вертикали вниз от его верхнего края.

Позиционирование фоновой картинки с помощью background-position в процентах несколько отличается от описанного выше:

С точки зрения измерения отступов от точки начала отсчета Html элемента, для которого мы позиционируем фоновую картинку, изменений никаких нет, разве только отступы рассчитываются в процентах. Но зато есть изменения в той точке на фоновой картинке, относительно которой мы его сдвигаем.

Позиция этой точки на фоновой картинке теперь тоже определяется тем соотношением, которое задано в CSS правиле background-position (в нашем примере это 60 процентов от левой стороны и 40 процентов от верхнего края):

Проценты очень удобны для позиционирования, например, по центру (50% по осям X и Y) или правому краю (100% по оси X). Ведь размеры области Html элемента могут изменяться в зависимости от ширины области просмотра, а при процентном позиционировании будет изменяться и положение фонового изображения, чтобы всегда находиться либо по центру, либо по правому краю. Сделать это с помощью позиционирования в абсолютных единицах через background-position у вас не получится.

Можно использовать так же в CSS правиле background-position и комбинацию абсолютных и относительных единиц, как например, здесь:

Например, если вам нужно будет прижать фоновое изображение к правому краю абзаца, а сверху задать фиксированный отступ, то вполне подойдет такое CSS правило (пример смотрите в этом же абзаце):

background-image:url(http://ktonanovenkogo.ru/image/logo.png);
background-repeat:no-repeat;
background-position:100% 25px;

Т.о. осуществилось выравнивание по правому краю (правая граница фонового изображения встала вплотную к правой границе области отведенной под абзац).

В CSS правиле background-position можно также использовать слова и комбинации двух слов, которые будут определять крайние позиции при позиционировании фонового изображения. Использовать можно слова left, center, right, top, bottom, а так же комбинации этих слов и абсолютных и относительных цифровых значений.

Например, вот так можно задать крайние положения в позиционировании фонового изображения с помощью слов (рядом приведены цифровые аналоги, чтобы было понятнее):

Причем, можно писать как «left top», так и «top left», ибо сути это не меняет:

1. Left в комбинации означает ноль по оси абсцисс
2. Right — 100% по оси абсцисс
3. Top — ноль по оси ординат
4. Bottom — 100% по оси ординат
5. Center — 50% по обоим осям

Одиночные записи left, right, top, bottom, center подразумевают, что с ними в паре должно стоять center (или 50%), т.е. выравнивание осуществляется по центру левого, правого, верхнего, нижнего края или по центру всей области отведенной для Html элемента, соответственно.

Хотя слова в background-position и кажутся более понятными, но на практике проще и понятнее будет использовать цифры (абсолютные или относительные — не суть важно), ибо первая цифра это всегда X, а вторая — Y. Слова же могут стоять в разной последовательности.

Что примечательно, если в CSS правиле background position написать только одно значение, то второе будет заменено по умолчанию на 50% (середина по вертикали).

Background-attachment и сборное CSS правило

Последнее CSS правило, которое позволяет настраивать положение фонового изображения, называется background attachment. Используется оно не часто, но зато позволяет делать довольно эффектные вещи, на вроде неподвижного фона при прокрутке текста страницы. Или же, на вроде того, что делает плагин Simple Counters, когда показатели счетчика фоловеров в Твиттере и подписчиков по версии Feedburner остаются недвижимы на странице при ее прокрутке:

У CSS правила background-attachment имеется всего лишь два значения scroll (используется по умолчанию) и fixed:

background-image:url(http://ktonanovenkogo.ru/image/rss_no_drop1.png);
background-repeat:no-repeat;
background-position:50%;
background-attachment:fixed;

Я задал такое Css правило для расположенных выше трех абзацев. Прокручивая текст вы увидите, что проходя через середину области просмотра с правого края этих абзацев (если у вас разрешение экрана 1280 на 1024, а если больше, то иконку вы вообще можете не увидеть, ибо она сдвинется правее границы абзацев) будет появляться фоновое изображение в виде моей иконки RSS.

Обратите внимание, что фоновое изображение в данном случае будет выровнено по центру области просмотра, а не по центру области отведенной под эти абзацы. Понятно, что в реальности такое размещение фоновой картинки вряд ли найдет применение.

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

Есть сборное правило Background, которое позволяет объединить все пять правил для работы с фоном в одном флаконе. Причем, значения для всех пяти правил в сборном варианте можно будет использовать в любом порядке и в любом количестве (они уникальны и браузер их друг с другом не перепутает). Все, что вы не укажете в явном виде, браузер посчитает равным значению по умолчанию.

background:#FEFCDE url(http://ktonanovenkogo.ru/image/logo.png) no-repeat 50%;

Данное сборное Css правило Background применено к этому абзацу для наглядности. Получилось не красиво, но это не главное. Для данного абзаца используется фоновая заливка странного желтого цвета, а так же используется фоновое изображения логотипа Лайвинтернет выровненное по центру абзаца. Т.к. для правила background-attachment никакого значение не задано, то используется значение scroll (принятое по умолчанию).

Если для какого-то элемента вы хотите задать лишь фоновую заливку цветом, а с фоновым изображение не заморачиваться, то вполне можете вместо:

background-color:#FEFCDE

написать:

background:#FEFCDE

Ибо все остальные значение сборного правила будут взяты по умолчанию, а вам это и нужно было.

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде
• Html коды и таблица RGB цветов для сайтов, как можно подобрать и задать цвета текста в Html и CSS, Яндекс.Цвета и другие программы палитр
• Img — вставка картинки в Html (Img Src), обтекание изображения текстом, картинка как фон для сайта (Html background), размер и выравнивание изображений
• Padding, margin и border — задание в CSS отступов и границ (top, bottom, left, right) для Html элементов
• CSS правило Display (block, none, inline) — задаем тип отображения Html элементов на вебстранице
• Меню для сайта — как сделать горизонтальное или вертикальное выпадающее меню на CSS и Html
• Font, Html color, Blockquote, Pre — форматирование текста в HTML, Html шрифты, Strong, Em, B, I