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

У свойства 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;
}