CSS свойство background является сокращенным свойством для установления всех свойств фонового стиля. Background содержит следующие свойства:
- background-color
- background-image
- background-repeat
- background-position
- background-origin
- background-clip
- background-attachment
- background-size
Свойство background-color используется для изменения цвета какого-либо тег фона.
Свойство background-image устанавливает одно или несколько изображений в качестве фона для элемента.
При использовании свойства background-repeat можно контролировать повторяющееся позиционирование элемента.
Свойство background-position устанавливает позицию фонового изображения.
Свойство background-origin определяет, где будет позиционироваться фоновое изображение.
Свойство background-clip используется для установления фонового изображения или цвета под границами.
Свойство background-attachment определяет, фиксировано ли фоновое изображение, или оно будет перемещаться при прокрутке страницы.
Свойство background-size определяет размер фонового изображения.
| Значение по умолчанию | Смотрите индивидуальные свойства. |
| Применяется | Ко всем элементам, а также к ::first-letter. |
| Наследуется | Нет |
| Анимируемое | Да. Background-color, background-position и background-size анимируемы. |
| Версия | CSS1+ new properties in CSS3 |
| DOM синтаксис | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Синтаксис
background: bg-color | bg-image | bg-position | bg-size | bg-repeat | bg-origin | bg-clip | bg-attachment | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>Здесь установлен зеленый цвет для background color.</p>
</body>
</html>Рассмотрим пример, где добавлено изображение для свойства background:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>Здесь использовано фоновое изображение.</p>
</body>
</html>Пример со свойством background, где применены значения background-color, background-image, background-repeat и background-attachment.
Пример
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>В этом примере свойство background указывает на свойства background-color, background-image для установления фонового изображения, background-repeat - для установления неповторяющегося изображения, background-attachment - для установления фиксированного изображения и background-position - для установления изображения в центре.</p>
</body>
</html>Рассмотрим другой пример со свойством background-size, который устанавливает размер фона:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>Здесь установлен размер фонового пространства на 100px.</p>
</body>
</html>Пример с background-clip. Свойство определяет, насколько должен расшириться фон внутри элемента:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<div>
<p>Background-clip для этого div элемента установлена на padding-box.</p>
</div>
</body>
</html>Пример со свойством background-origin . Здесь фоновое изображение запускается с левого верхнего угла контента:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>Здесь установлено свойство background-origin: padding-box (значение по умолчанию).</p>
<div></div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| background-color | Устанавливает фоновый цвет. |
| background-image | Устанавливает одно или несколько изображений. |
| background-position | Устанавливает позицию фонового изображения. |
| background-size | Устанавливает размер фонового изображения. |
| background-repeat | Определяет, каким образом будут повторяться фоновые изображения. |
| background-origin | Определяет, где будет позиционироваться фоновое изображение. |
| background-clip | Устанавливает фоновое изображение или цвет под границами. |
| background-attachment | Определяет фиксированность изображения. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Практикуйте свои знания
