Основы работы с CSS
         

Параметр 'background'


Этот параметр предназначен для задания всех свойств фона в одном объявлении.

Наследование: нет.

Примеры:

body { background: url(picture.gif) }

body { background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll }

body { background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x bottom }

Может принимать следующие значения:

ЗначениеОписание

background-color

background-image

background-repeat

background-attachment

background-position

В этом объявлении можно задать от одного до пяти свойств фона

Рассмотрим их подробнее.



Параметр 'background-attachment'


Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном месте или будет перемещаться вместе со всей страницей.

Наследование: нет.

Может принимать следующие значения:

ЗначениеОписание
ScrollФоновое изображение перемещается, когда перемещается страница
FixedФоновое изображение не перемещается, когда перемещается страница

Пример:

body { background-attachment: fixed; background-repeat: repeat }



Параметр 'background-color'


Этот параметр задает фоновый цвет элемента.

Наследование: нет.

Может принимать следующие значения:

ЗначениеОписание
colorЗначение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000)
transparentФоновый цвет является прозрачным

Пример:

h1 { background-color: gray; font-family: arial }





Параметр 'background-image'


Данный параметр задает изображение в качестве фона.

Наследование: нет.

Может принимать следующие значения:

ЗначениеОписание
urlПуть доступа к изображению
noneФонового изображения нет

Пример:

body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: repeat; background-attachment: fixed }

В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.



Параметр 'background-position'


Этот параметр задает начальное положение фонового изображения.

Наследование: нет.

Может принимать следующие значения:

ЗначениеОписание

top left top center top right center left center center center right bottom left bottom center bottom right

Если определить только одно ключевое слово, то вторым значением подразумевается "center"
x-% y-%Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%.
x-pos y-posПервое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.

Пример:

body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-position: right top; background-attachment: fixed }

body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed }



Параметр 'background-repeat'


Этот параметр определяет, каким образом будет повторяться фоновое изображение.

Наследование: нет.

Может принимать следующие значения:

ЗначениеОписание
repeat

Фоновое изображение будет повторяться по вертикали и по горизонтали
repeat-xФоновое изображение будет повторяться по горизонтали
repeat-yФоновое изображение будет повторяться по вертикали
no-repeatФоновое изображение будет выведено только один раз

Пример:

body { background-image: url(http://www.intuit.ru/departament/image.gif); background-repeat: repeat; background-attachment: fixed }



Параметры фона в CSS: подробное рассмотрение


Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

ПараметрОписаниеЗначенияIEFNW3C
backgroundСлужит для задания всех параметров фона в одном объявлении

background-color

background-image

background-repeat

background-attachment

background-position

 4161*
background-attachmentЗадает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей

scroll

fixed

4161
background-colorЗадает цвет фона элемента

color-rgb

color-hex

color-name

transparent

4141
background-imageЗадает в качестве фона изображение

url

none

4141
background-positionЗадает начальное положение фонового изображения

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

 4161
background-repeatОпределяет, будет ли и каким образом будет повторяться фоновое изображение

repeat

repeat-x

repeat-y

no-repeat

 4141

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).



Данный пример показывает, как задать


    Данный пример показывает, как задать фоновый цвет элемента.
    <html> <head>
    <style type="text/css"> ul {background-color: rgb(200,10,200)} ol {background-color: #00FFFF} li {background-color: transparent} p {background-color: blue} </style> </head>
    <body>
    <ul> <li>this is ul</li> </ul> <ol> <li>this is ol</li> </ol> <p>This is a paragraph</p>
    </body> </html>
    Данный пример показывает, как задать в качестве фона изображение.
    <html> <head>
    <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg) } </style>
    </head>
    <body> В документе в качестве фона использовано изображение </body>
    </html>
    Данный пример показывает, как использовать повторяющееся фоновое изображение.
    <html> <head>
    <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat } </style>
    </head>
    <body> В документе в качестве фона использовано повторяющееся изображение </body> </html>
    Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение.
    <html> <head>
    <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat-y } </style>
    </head>
    <body> В документе в качестве фона использовано повторяющееся изображение, которое размножается только вертикально </body> </html>
    Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
    <html> <head>
    <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat-x } </style>
    </head>
    <body> В документе в качестве фона использовано повторяющееся изображение, которое размножается только горизонтально. </body> </html>


    Данный пример показывает, как разместить на странице фоновое изображение.
    <html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat; background-position: bottom; } </style> </head>
    <body> </body> </html>
    Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
    <html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: no-repeat; background-attachment: fixed } </style> </head>
    <body> Определено фиксированное фоновое изображение<br> Определено фиксированное фоновое изображение<br> Определено фиксированное фоновое изображение<br> </body>
    </html>
    Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.
    <html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: no-repeat; background-attachment: scroll } </style> </head>
    <body> Определено прокручивающееся фоновое изображение<br> Определено прокручивающееся фоновое изображение<br> Определено прокручивающееся фоновое изображение<br> </body>
    </html>
    Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
    <html> <head> <style type="text/css"> body { background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center; } </style> </head>
    <body> Это документ, для которого свойства фона заданы в одном объявлении<br> Это документ, для которого свойства фона заданы в одном объявлении<br> Это документ, для которого свойства фона заданы в одном объявлении<br> </body>
    </html>

Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.