Урок 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>

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

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

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 | Обновление: Май 2012

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

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