CSS background — сокращённое свойство
Сокращённое свойство объединяет несколько объявлений в одно, и background делает это для всех свойств фона, благодаря чему код становится короче.
Оно охватывает background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin и background-clip.
Для любого значения, которое вы опустите, используется значение по умолчанию.
Пример
Цвет, изображение, повтор и позиция находятся здесь в одном сокращённом объявлении.
Prompt
HTML-страница, которая задаёт несколько свойств фона сразу с помощью сокращённой записи background.
Во внутреннем блоке
<style> задайте фон body с помощью одного сокращённого объявления: background: #ffffff url("img_tree.png") no-repeat right top. Добавьте заголовок и абзац.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
</style>
</head>
<body>
<h1>The background Shorthand Property</h1>
<p>All the background properties are set in one declaration.</p>
</body>
</html>
Полная форма
Записанный в виде отдельных свойств, тот же фон занимает все эти строки, которые заменяет сокращение.
styles.css
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Все свойства фона CSS
Краткий справочник по свойствам фона:
background— все свойства фона в одном объявлении.background-attachment— прокручивается ли фоновое изображение вместе со страницей или остаётся зафиксированным.background-clip— область, в которой отрисовывается фон.background-color— цвет позади элемента.background-image— изображение, используемое в качестве фона элемента.background-origin— где позиционируется фоновое изображение.background-position— где начинается фоновое изображение.background-repeat— как повторяется фоновое изображение.background-size— какого размера фоновое изображение.