Лекционный и практический материал по теме Фоновое изображение с помощью CSS

Свойство CSS background используется для форматирования фона элементов html. Вы можете изменять следующие свойства CSS: ·  background-color ·  background-image ·  background-repeat ·  background-attachment ·  background-position Цвет фона Свойство background-color определяет цвет фона элемента. Фон страницы указывается в селекторе body: Пример body {background-color:#b0c4de;} Цвет фона может быть указан с помощью: ·       названия цвета, например, "red" (красный) ·       значения RGB, например, "rgb(255,0,0)" ·       шестнадцатиричного кода цвета, например, "#ff0000" В примере ниже элементы h1, p и div имеют разные цвета фона: Пример h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} Фон-изображение Свойство background-image используется для определения изображения, которое будет использоваться в качестве фона. По умолчанию, фоновое изображение повторяется по горизонтали и вертикали. Фоновое изображение для всей страницы можно задать так: Пример body {background-image:url('paper.gif');} Повторение фонового изображения По умолчанию, фоновое изображение повторяется по горизонтали и вертикали. Для того, чтобы повторять фоновое изображение только по горизонтали, надо использовать следующую запись: Пример body { background-image:url('gradient2.png'); background-repeat:repeat-x; } Для того, чтобы повторять изображение по вертикали, надо заменить значение repeat-x на repeat-y. Позиционирование фонового изображения и отмена повторения Совет: если вы используете фоновое изображение, старайтесь подбирать его так, чтобы оно гармонировало с цветом текста. Для того, чтобы фоновое изображение отображалось только один раз, значение свойства background-repeat должно иметь следующее значение: Пример body { background-image:url('img_tree.png'); background-repeat:no-repeat; } Для изменения положения фонового изображения на странице используется свойство background-position: Пример body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; } Краткая запись свойств фона Для сокращения кода css вы можете записать все свойства фона одной записью. Все значения фона, записываются в одном свойстве, называемом "background": Пример body {background:#ffffff url('img_tree.png') no-repeat right top;} При краткой записи соблюдайте порядок указания свойств: ·  background-color ·  background-image ·  background-repeat ·  background-attachment ·  background-position   Если вы не укажете какое-либо из свойств, будет подставлено значение по умолчанию.