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

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

Фоновое изображение и неподвижный фиксированный 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 | Обновление: Ноябрь 2018

CSS позиция фона   Как зафиксировать фон   Фиксированный CSS margin