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

У свойства background-attachment имеются параметры, с помощью которых можно зафиксировать фоновое изображение или наоборот сделать его подвижным для прокручивания вместе с содержимым страницы.


background-attachment: fixed
background-attachment: scroll
background-attachment: local
background-attachment: inherit

fixed – данный параметр фиксирует фоновое изображение.

scroll – фоновое изображение будет перемещаться с контентом.

local – фон прокручивается не выходя за рамки элемента.

inherit – наследует значение.


HTML

<div class="content">

  <h1>Неподвижный фон</h1>

    <p>
      Изображение, расположенное справа зафиксировано
      и будет оставаться на заданном месте в случае
      прокручивания содержимого страницы.
    </p>

</div>


CSS

body{   
    background-attachment: fixed;   
    background-repeat: no-repeat;
    background-position: top right;
    background-image: url("/img/corner.jpg");
    font-family: Arial, Helvetica, sans-serif;
}
p{
    font-size: 18px;
}
h1{
    font-size: 22px;
}
.content{
    width: 300px;
    height: 1500px;
    padding-left: 25px;
    padding-top: 5px;
}

Если в дизайне сайта используется больше одного фонового изображения, в CSS3 предусмотрена возможность задать ряд параметров перечисляя их через запятую.


HTML

<div class="content">

  <h1>Неподвижный фон</h1>
 
    <p>
      Изображения справа и слева зафиксированы,
      а содержимое страницы расположенное по
      центру будет прокручиваться.
    </p>
  
</div>


CSS

body{
    background-position: left, right;
    background-attachment: fixed, fixed;
    background-repeat: repeat-y, repeat-y;
    background-image: url("/img/traces-animal.jpg"), url("/img/human-footprint.jpg");
    font-family: Arial, Helvetica, sans-serif;
}
p{
    font-size: 18px;
}
h1{
    font-size: 22px;
}
.content{
    width: 300px;
    height: 1500px;
    margin: 0px auto;
    padding-left: 25px;
    padding-top: 5px;	
}