Свойство
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;":
