CSS свойства фона

CSS фоновое изображение

Урок 11. CSS фоновое изображение

CSS атрибуты и значения, определяющие положение фона

Изображение в качестве фона web-страницы:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-image:url(../images/cvetok.png)
}
</style>
</head>
<body>
<p>Текст черного цвета (по умолчанию)</p>
</body>

Результат: CSS фоновое изображение

background-image:url(../images/cvetok.png) определяет изображение-фон.

По умолчанию изображение-фон распространяется по горизонтали и по вертикали, заполняя собой все пространство, что видно из результата примера. Но возможны и другие варианты.

CSS изображение-фон распространяется по горизонтали

Пример:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-image:url(../images/cvetok.png);
background-repeat:repeat-x
}
</style>
</head>
<body>
<p>Текст</p>
</body>

Результат: фоновое изображение распространяется по горизонтали


Атрибуты и значения

CSS изображение-фон распространяется по вертикали

Пример:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-image:url(../images/cvetok.png);
background-repeat:repeat-y
}
</style>
</head>
<body>
<p>Текст</p>
</body>

background-repeat:repeat-y – изображение-фон распространяется по вертикали.

Результат: фоновое изображение распространяется по вертикали

CSS изображение-фон не распространяется

Пример:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-image:url(../images/cvetok.png);
background-repeat:no-repeat
}
</style>
</head>
<body>
<p>Текст</p>
</body>

Значение no-repeat запрещает распространение изображения-фона.

Результат: фоновое изображение не распространяется

В примере выше изображение-фон находится в верхнем левом углу, но его местоположение можно изменить → смотрите следующий урок.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 10. CSS цвет фона   CSS свойства фона   Урок 12. CSS позиция фона

    Сохранить в сервисы и закладки