Фон (background-color, background-image)

Свойство 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;":
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: