Установка фонового цвета
Для установки фонового цвета используется селектор body и свойство background-color. В качестве значения можно указать название цвета (например, red, blue, green, grey) или шестнадцатеричный код цвета (#HEX).
<body>
<!-- Ваш контент -->
</body>
<style>
body {
background-color: #4287f5; /* Пример синего цвета */
color: #ffffff; /* Пример белого цвета текста */
}
</style>Свойство background-color применимо не только к тегу <body>, но и к другим HTML-элементам (например, <p>, <span>, <table>).
Установка фонового изображения
Для добавления фонового изображения используется свойство background-image с указанием URL картинки через функцию url().
<body>
<!-- Ваш контент -->
</body>
<style>
body {
background-image: url('https://example.com/image.jpg'); /* URL вашей картинки */
}
</style>Управление повторением и позицией изображения
Свойство background-repeat управляет повторением фонового изображения. Возможные значения: no-repeat, repeat, repeat-x, repeat-y. Свойство background-position определяет позицию изображения. Можно указать координаты (например, 10px 20px) или ключевые слова: center, top, bottom, left, right.
body {
background-repeat: no-repeat; /* Пример: изображение не повторяется */
background-position: center; /* Пример: изображение по центру */
}Размер и прикрепление фонового изображения
Свойство background-size позволяет управлять размером фонового изображения. cover растягивает изображение, полностью покрывая область, сохраняя пропорции. contain масштабирует изображение, чтобы оно полностью поместилось в область, сохраняя пропорции. Свойство background-attachment: fixed фиксирует фоновое изображение относительно окна браузера, предотвращая прокрутку вместе со страницей.
body {
background-size: cover; /* Пример: изображение растянуто на всю область */
background-attachment: fixed; /* Фиксированное фоновое изображение */
}Для демонстрации эффекта background-attachment: fixed, приведём пример с двумя блоками <div> разной высоты. Фоновое изображение устанавливается для родительского элемента.
<div id="first"></div>
<div id="second"></div>
<style>
#first {
height: 500px;
background: url('https://example.com/image.jpg') no-repeat center fixed;
}
#second {
height: 1000px;
}
</style>Сокращенная запись свойства background
Свойства background-color, background-image, background-repeat, background-position, background-size и background-attachment можно объединить в одно свойство background:
body {
background: #4287f5 url('https://example.com/image.jpg') no-repeat center / cover fixed;
}В этом уроке мы изучили основные способы работы с фоновыми картинками в CSS, включая установку цвета и изображений, управление повторением, позиционированием, размером и прикреплением, а также использование свойства background-attachment: fixed для создания эффекта параллакса. Эти знания позволят вам создавать более привлекательные и динамичные веб-страницы.