Свойство background repeat – Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

Использование фонов при оформлении сайта. Часть 1

Всем привет.

Совсем недавно мы с Вами познакомились со свойствами границ (border) при использовании CSS. Сегодня мы займемся рассмотрением свойств фонов.

Эта тема также очень важна, так как ни один современный сайт не обходится без применения фоновых изображений.

Приступим.

Свойство background

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

.box {
     background: #ffffff url(images/bg.png) repeat-x;}

Это свойство background определяет фон для всех элементов с идентификатором класса .box (подробнее об идентификаторах читаем здесь) и придает ему следующие свойства: белый цвет подложки (#ffffff), фоновое изображение, которое находится по адресу url (images/bg.png) и задает для этого фона повторение по оси х. Если писать каждую инструкцию отдельно, то код будет выглядеть вот так:

.box {
     background-color: #ffffff;
     background-image: url(images/bg.png);
     background-repeat: repeat-x;}

Эти две записи абсолютно идентичны.

А теперь давайте более конкретно разберем все специфичные свойства фонов.

Свойство background-color

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

Также может принимать значение transparent (прозрачный фон). Кстати, по умолчанию фон каждого элемента имеет значение transparent. Поэтому, если вы не определите цвет фона каждого элемента, то цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

Пример использования цвета фона:

Для этого контейнера задано свойство фона:

background-color:#83c5de;

Свойство background-image

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан пока фоновая картинка не загрузится полностью. То же самое произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

Пример применения свойства:

.box {
     background-image: url(images/bg.jpg);}

Эта инструкция определяет фоновую картинку, которая находится по адресу url (images/bg.jpg) для всех элементов с идентификатором класса .box

Также может иметь значение none. Оно отменяет применение фоновой картинки к элементу.

Продолжим развивать наш пример из прошлого пункта (добавим к нему фоновую картинку):

Мы добавили к коду свойство background-image. И теперь он выглядит так:

background-color:#83c5de;
background-image: url(images/fsm-logo-small.png);

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

Свойство background-repeat

Это свойство определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

В CSS3 если используется несколько фонов допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Свойство background-repeat может принимать следующие значения:

no-repeat — Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.

repeat — Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.

repeat-x — Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.

repeat-y — Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.

inherit — Наследует значение родителя.

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

round — Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Продолжим работать с нашим примером (уберем тиражирование):

Мы добавили к нашему коду свойство background-repeat и теперь фоновая картинка не тиражируется.

background-color:#83c5de;
background-image: url(images/fsm-logo-small.png);
background-repeat: no-repeat;

Теперь неплохо было бы выровнять картинку по центру.

Свойство background-position

Задает смещение начального положения фонового изображения, установленного с помощью свойства background-image. По умолчанию фоновое изображение выравнивается по левому верхнему углу элемента. При помощи свойства background-position можно изменить это выравнивание.

В CSS3 допустимо указывать несколько значений — для каждого фона (если фонов несколько), перечисляя значения через запятую.

У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах и прочих единицах измерения CSS. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной или иной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• right top = top right = 100% 0% (в правом верхнем углу)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• center = center center = 50% 50% (по центру)
• right = right center = center right = 100% 50% (по правому краю и по центру)
• bottom left = left bottom = 0% 100% (в левом нижнем углу)
• bottom = bottom center = center bottom = 50% 100% (по центру внизу)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

Вернемся к нашему примеру (выровняем фоновую картинку по центру):

Код теперь выглядит вот так:

background-color:#83c5de;
background-image: url(images/fsm-logo-small.png);
background-repeat: no-repeat;
background-position: center;

Использование нескольких фоновых изображений

Давайте теперь на наш пример наложим еще один слой фона. На нем нанесем несложный узор на наш контейнер.

Тут нужно учесть, что фон, который указан первым будет расположен сверху, а второй — под ним. Если слоев больше двух, то соответственно слои будут располагаться в порядке их указания в свойстве background-image.

Для этого мы немного изменили код. Теперь он выглядит вот так:

background-color:#83c5de;
background-image: url(images/fsm-logo-small.png), url(/images/uzor-bg.png);
background-repeat: no-repeat, repeat;
background-position: center;

Хочу отметить, что размер картинки узора всего 6×6 пикселей. Поэтому мы ее растиражировали по горизонтали и вертикали. Для этого мы также (через запятую в свойстве background-repeat) прописали значение для второго фона. Значения для каждого фона нужно располагать в том же порядке, что и в свойстве background-image.

Заключение.

Это основные (наиболее часто используемые) CSS свойства для фонов. также к основным можно отнести свойство background-size. Его применение я подробно описал в статье: «Управление размером фонового изображения при помощи CSS».

Кроме них есть еще несколько дополнительных свойств. Мы рассмотрим их завтра. Не пропустите. Подписывайтесь на обновления.

P.S.: Если к нашему примеру добавить еще несколько свойств границ, то мы получим вот такой код…

background-color:#9fe5ff;
background-image: url(images/fsm-logo-small.png), url(/images/uzor-bg.png), url(images/gradient-bg.png);
background-repeat: no-repeat, repeat, repeat-x;
background-position: center;
border:4px solid #ffffff;
border-radius:12px;
box-shadow:0 0 3px #666666;

… И вот такую симпатичную кнопку…

Подробное описание CSS свойств границ можно найти здесь.

Свойство background | CSS справочник

Определение и применение

CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.

Значения следующих свойств могут быть установлены:

Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем «/» (position/size).

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Поддержка браузерами

CSS синтаксис:

background:"color image position/size repeat origin clip attachment initial | inherit";

JavaScript синтаксис:

object.style.background="blue no-repeat"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>

В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:

• зеленый цвет заднего фона в шестнадцатерично системе указания цвета — #00FF00 (background-color).
• путь к изображению, которое используется в качестве заднего фона (smile.png) (