CSS неподвижный фон

CSS фиксированный фон

Урок 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 | Обновление: Август 2014

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

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