Фоновое изображение и неподвижный фиксированный 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