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

Новые CSS уроки

CSS справочник

Еще уроки по CSS

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

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

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

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

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

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

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

background-repeat – управляет распространением изображения-фона.
Значение repeat-x – определяет распространение изображения-фона по горизонтали.

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 | Обновление: Ноябрь 2018

CSS цвет фона CSS фоновое изображение CSS позиция фона