|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Фон в CSS
Фон в 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
Если вы не укажете какое-либо из свойств, будет подставлено значение по умолчанию.
Все свойства фона — справка CSS
Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| background | Все свойства фона одной записью | background-color background-image background-repeat background-attachment background-position inherit |
1 |
| background-attachment | Указывает на то, должно ли фоновое изображение прокручиваться вместе с содержимым страницы или нет | scroll fixed inherit |
1 |
| background-color | Фоновый цвет элемента | color-rgb color-hex color-name transparent inherit |
1 |
| background-image | Фоновое изображение элемента | url(URL) none inherit |
1 |
| background-position | Стартовая позиция элемента | left top left center left bottom right top right center right bottom center top center center center bottom x% y% xpos ypos inherit |
1 |
| background-repeat | Повтор фонового изображения | repeat repeat-x repeat-y no-repeat inherit |
1 |
