Рассмотрим свойства background-color, color и background-image для задания фонового цвета и изображения.
Свойства background-color и color
background-color задаёт цвет фона элемента. Например, background-color: yellow; устанавливает жёлтый фон. color задаёт цвет текста. Различие: background-color — для фона, color — для текста.
Использование background-image
Для задания фонового изображения используется свойство background-image. Значение — URL изображения в одинарных или двойных кавычках.
Путь к изображению может быть локальным (например, my_image.png для файла в той же папке, что и CSS-файл) или удалённым (URL, скопированный из браузера).
Повторение фоновой картинки
Свойство background-repeat управляет повтором изображения. По умолчанию (repeat) изображение повторяется по горизонтали и вертикали. no-repeat отключает повторение.
Комбинирование свойств фона
Свойства фона можно объединить:
background: url('image.png') no-repeat center top;Здесь:
- url(‘image.png’) — путь к изображению.
- no-repeat — изображение не повторяется.
- center top — изображение центрировано по горизонтали и вверху по вертикали.
Возможны значения repeat-x (повторение по горизонтали), repeat-y (по вертикали). Можно указать цвет фона на время загрузки изображения:
background: url('image.png') no-repeat center top yellow;Пока изображение загружается, фон будет жёлтым.