С помощью CSS Вы можете оформлять фон элементов.
ТвитнутьВ CSS существует группа свойств для оформления фона HTML элементов:
CSS свойство background-color позволяет установить цвет фона для выбранного элемента.
Пример ниже делает цвет фона страницы зеленым:
Цвет может быть задан следующими способами:
С помощью CSS свойства background-image Вы можете вставить произвольное изображение в качестве фона.
По умолчанию, изображение будет повторяться пока не заполнит все содержимое элемента.
Обратите внимание: всегда тщательно подбирайте цвета. Фоновое изображение не должно сливаться с текстом.
Повторяющееся изображение в качестве фона это не всегда, то что нужно.
CSS свойства background-repeat позволяет определить как должно повторяться фоновое изображение при вставке:
Пример
/* Фоновое изображение будет повторяться только по горизонтали */
body
{
background-image:url('/editor/spider2.gif');
background-repeat:repeat-x;
}
CSS свойство background-position позволяет задавать местоположение фонового изображения.
В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали.
Величина смещения может быть указана как с помощью пикселей (px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:right top;).
Пример
body
{
background-image:url('/editor/spider2.gif');
background-repeat:no-repeat;
background-position:40px 60px;
}
CSS свойство background-attachment позволяет прикреплять фоновые изображения к определенным местам.
Прикрепленное изображение будет оставаться на данном месте даже при прокрутке страницы.
Пример
/* Фоновая картинка будет оставаться на одном месте даже при прокрутке страницы */
body
{
background-image:url('/editor/spider2.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
}
Для того, чтобы сократить итоговый размер кода в CSS была предусмотрена краткая форма записи некоторых свойств.
Для краткой записи оформления фона элементов в CSS предусмотрено свойство background.
Пример
/* Фоновое изображение будет размещено в правом верхнем углу (в предыдущем примере
нам приходилось использовать 4 различных CSS свойства для того, чтобы сделать тоже
самое) */
body
{
background:url('/editor/spider2.gif') no-repeat fixed right top;
}
При использовании стенографической формы записи соблюдайте следующий порядок следования свойств:
Обратите внимание: Вы можете пропускать неиспользуемые значения.
Для того, чтобы узнать больше о желаемом свойстве щелкните по его названию.
| Свойство | Описание | Значение |
|---|---|---|
| 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>