CSS свойство background
CSS свойство background — это сокращённая запись, используемая для установки всех свойств фона. Свойство background включает в себя следующие свойства:
- background-color, которое используется для установки цвета фона.
- background-image, которое используется для установки одного или нескольких фоновых изображений для элемента.
- background-repeat, которое используется для управления повторением фона.
- background-position, которое используется для установки позиции фонового изображения.
- background-origin, которое используется для определения области позиционирования фона, то есть позиции изображения, задаваемого свойством
background-image. - background-clip, которое используется для определения области отрисовки фона (изображения или цвета) под его границей.
- background-attachment, которое используется для определения, зафиксировано ли фоновое изображение или оно будет прокручиваться вместе со страницей.
- background-size, которое используется для определения размера фонового изображения.
Если в сокращённой записи background используется свойство background-size, для разделения его от background-position следует использовать символ /.
При использовании нескольких источников background-image, но необходимости указать background-color, цвет фона должен идти последним в списке.
| Initial Value | See individual properties. |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Background-color, background-position, and background-size are animatable. |
| Version | CSS1+ new properties in CSS3 |
| DOM Syntax | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Синтаксис
Синтаксис свойства CSS background
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;Пример свойства background:
Пример свойства CSS background-color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>Здесь цвет фона установлен в зелёный.</p>
</body>
</html>Результат
Пример свойства background с применённым изображением:
Пример свойства CSS background-image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://ru.w3docs.com/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.
Пример свойства background с разными значениями:
Пример свойства CSS background
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("https://ru.w3docs.com/build/images/w3docs-logo-black.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 используется для указания размера фона.
Пример свойства background-size:
Пример свойства CSS background-size
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("https://ru.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
background-size: cover;
}
</style>
</head>
<body>
<h2>Пример свойства background</h2>
<p>Здесь размер фона установлен в cover.</p>
</body>
</html>Здесь свойство background-clip определяет, насколько далеко фон должен распространяться внутри элемента.
Пример свойства background-clip:
Пример свойства CSS 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>Для этого элемента div свойство background-clip установлено в padding-box.</p>
</div>
</body>
</html>В следующем примере используется свойство background-origin. Оно позволяет фоновому изображению начинаться с верхнего левого угла содержимого.
Пример свойства background-origin:
Пример свойства CSS background-origin
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("https://ru.w3docs.com/build/images/w3docs-logo-black.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 | Наследует это свойство от родительского элемента. |
Практика
Какие свойства имеет CSS background?