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

Параметры CSS для фона

Разбить на страницы
Показывать лекцию целиком

Параметры CSS для фона определяют фоновые эффекты элемента.

Примеры

  • Данный пример показывает, как задать фоновый цвет элемента.
    <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>
    •

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

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

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

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

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

    background-color

    background-image

    background-repeat

    background-attachment

    background-position

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

    scroll

    fixed

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

    color-rgb

    color-hex

    color-name

    transparent

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

    url

    none

    		 4 1 4 1
    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

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

    repeat

    repeat-x

    repeat-y

    no-repeat

    		 4 1 4 1

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

    Параметр '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-x Фоновое изображение будет повторяться по горизонтали
    repeat-y Фоновое изображение будет повторяться по вертикали
    no-repeat Фоновое изображение будет выведено только один раз

    Пример:

    body
{ 
background-image: url(http://www.intuit.ru/departament/image.gif);
background-repeat: repeat;
background-attachment: fixed
}
    Страницы:

    Параметры CSS для фона определяют фоновые эффекты элемента.

    Примеры

  • Данный пример показывает, как задать фоновый цвет элемента.
    <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>
    •

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

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

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

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

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

    background-color

    background-image

    background-repeat

    background-attachment

    background-position

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

    scroll

    fixed

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

    color-rgb

    color-hex

    color-name

    transparent

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

    url

    none

    		 4 1 4 1
    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

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

    repeat

    repeat-x

    repeat-y

    no-repeat

    		 4 1 4 1

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

    Параметр '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-x Фоновое изображение будет повторяться по горизонтали
    repeat-y Фоновое изображение будет повторяться по вертикали
    no-repeat Фоновое изображение будет выведено только один раз

    Пример:

    body
{ 
background-image: url(http://www.intuit.ru/departament/image.gif);
background-repeat: repeat;
background-attachment: fixed
}
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^