Фон (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, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: