Свойство background-color используется для заливки элемента определённым цветом. Делать заливку заднего фона можно не только блочным элементам, но и строчным. Пример использования свойства:
<div style="
color: #fff;
background-color: #c0d2de;
">Тише, мыши, кот на крыше</div>Результат будет такой:
Картинка в качестве фона (background-image)
Помимо заливки области цветом, возможно поставить картинку на задний фон. Для этого необходимо использовать CSS свойство background-image.
<div style="
background-image: url('/favicon.ico');
width: 100px;
height: 100px;
"></div>По умолчанию фоновая картинка будет размножена как горизонтали, так и по вертикали. Поэтому получится так:
Картинка в качестве фона (background-repeat)
Есть возможность запретить картинке из background-image множиться по горизонтали и вертикали. Для этого существует свойство background-repeat. Это свойство может принимать несколько значений:
- no-repeat — не повторять картинку ни по горизонтали, ни по вертикали
- repeat — повторять картинку во всех направлениях
- repeat-x — повторять картинку только по горизонтали
- repeat-y — повторять картинку только по вертикали
Давайте попробуем запретить картинке повторы Всех направлениях:
<div style="
background-image: url('/favicon.ico');
background-repeat: no-repeat;
width: 100px;
height: 100px;
"></div>Получится так:
Позиция (background-position)
Ещё одним часто используемым свойством для фоновых картинок является background-position. Как следует из названия, это свойство задаёт позицию фоновой картинки. Используется в основном с фоном, у которого установлено свойство «background-repeat: no-repeat;». Принимает значения в процентах «%», пикселях «px» и названиях:
- top — вверу
- bottom — внизу
- right — справа
- left — слева
- center — по центру
Свойство background-position принимать одно или несколько значений. Если передать одно значение, то координата X и Y будут равны ему. Если передать два, то можно установить отдельно X и Y. В качестве примера поставим положение картинки внизу по центру с помощью своства «background-position: bottom center;«:
