AJAX загрузка
home

С помощью CSS Вы можете оформлять фон элементов.

Оформление фона в CSS

В CSS существует группа свойств для оформления фона HTML элементов:

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Цвет фона

CSS свойство background-color позволяет установить цвет фона для выбранного элемента.

Пример ниже делает цвет фона страницы зеленым:

Пример

body 
{
background-color:green;
}

Цвет может быть задан следующими способами:

  1. С помощью имени (например green задаст зеленый цвет);
  2. С помощью RGB значения ('rgb(255,0,0)' задаст красный цвет);
  3. С помощью шестнадцатеричного значения ("#0000ff" задаст синий цвет).

Изображение в качестве фона

С помощью CSS свойства background-image Вы можете вставить произвольное изображение в качестве фона.

По умолчанию, изображение будет повторяться пока не заполнит все содержимое элемента.

Пример

body 
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
}

Обратите внимание: всегда тщательно подбирайте цвета. Фоновое изображение не должно сливаться с текстом.

Повторяющееся изображение в качестве фона это не всегда, то что нужно.

CSS свойства background-repeat позволяет определить как должно повторяться фоновое изображение при вставке:

  • background-repeat:repeat-x - изображение будет повторяться только по горизонтали;
  • background-repeat:repeat-y - изображение будет повторяться только по вертикали;
  • background-repeat:no-repeat - изображение не будет повторяться.

Пример

/* Фоновое изображение будет повторяться только по горизонтали */
body 
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
background-repeat:repeat-x;
}

CSS свойство background-position позволяет задавать местоположение фонового изображения.

В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали.

Величина смещения может быть указана как с помощью пикселей (px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:right top;).

Пример

body 
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
background-repeat:no-repeat;
background-position:40px 60px;
}

CSS свойство background-attachment позволяет прикреплять фоновые изображения к определенным местам.

Прикрепленное изображение будет оставаться на данном месте даже при прокрутке страницы.

Пример

/* Фоновая картинка будет оставаться на одном месте даже при прокрутке страницы */
body 
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
}

Краткая форма записи

Для того, чтобы сократить итоговый размер кода в CSS была предусмотрена краткая форма записи некоторых свойств.

Для краткой записи оформления фона элементов в CSS предусмотрено свойство background.

Пример

/* Фоновое изображение будет размещено в правом верхнем углу (в предыдущем примере 
нам приходилось использовать 4 различных CSS свойства для того, чтобы сделать тоже 
самое) */
body 
{
background:url('http://www.wisdomweb.ru/editor/spider2.gif') no-repeat fixed right top;
}

При использовании стенографической формы записи соблюдайте следующий порядок следования свойств:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Обратите внимание: Вы можете пропускать неиспользуемые значения.

Список всех свойств оформления фона

Для того, чтобы узнать больше о желаемом свойстве щелкните по его названию.

Свойство Описание Значение
background Устанавливает все возможные свойства фона за одно определение background-color
background-image
background-repeat
background-attachment
background-position
background-attachment Указывает будет ли фоновая картинка привязана к одному месту, или будет прокручиваться вместе с текстом. scroll
fixed
background-color Устанавливает фоновый цвет элемента. rgb(x,x,x)
#xxx
название_цвета
background-image Устанавливает фоновую картинку для элемента url(URL)
none
background-repeat Указывает как фоновая картинка будет повторяться repeat
repeat-x
repeat-y
no-repeat
background-position Указывает координаты расположения фоновой картинки. left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

x% y%
xpos ypos

Сделайте сами

Задание 1 вставьте картинку паучка и переместите ее в рамку (подробности в редакторе).

Пример

<div id='spidercont'>
<p id='text'>1. Вставьте в данный элемент картинку паучка <b>spider2.gif</b> 
(картинка находится в папке редактора так что обращайтесь к ней просто по имени) 
с помощью свойства <b>background-image</b>. Изображение при этом не должно повторяться.
</p>
</div>
<div id='spidersquare'>
2. Перенесите паучка в данную рамку с помощью свойства <b>background-position</b>.
 При этом при прокрутке страницы изображение паука должно оставаться в рамке.
</div>