Урок 13. Фиксируем фоновое изображение с помощью CSS

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

В этом уроке мы продолжаем рассматривать свойства фона.

Пример того, как зафиксировать фоновое изображение в нужном месте:

                
                 <head>

                 <title>Пример</title>
                 
 <style type="text/css">

 
                body {

                 background-color:BlanchedAlmond;

                 }

                 .fon_scroll {

                 margin:0 auto;
 
					width:700px;
 
					height:800px;

                    padding:30px;

                    background-color:#ffffff;
 
					background-image:url(../images/7.jpg);
 
					background-repeat:no-repeat;

                    background-attachment:fixed;
 
					background-position:40px 40px;

                
				}

				 </style>

                 </head>

                 <body>

                <div class="fon_scroll">

                <p>Текст  документа</p>

                <p>Текст  документа</p>

                <p>Текст  документа</p>

                <p>Текст  документа</p>

                </div>

                 </body>

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

background-attachment:fixed фиксирует фоновое изображение в заданной позиции.

background-position: задает точные координаты фона по горизонтали и по вертикали.

Результат:

Дата публикации: Октябрь 2009 | Обновление: Май 2012

Урок 12. CSS позиция фона Как зафиксировать фон Урок 14. CSS margin

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