«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS

Свойство background-attachment определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента или будет неподвижным.

Это свойство применимо ко всем элементам.

Значение свойства background-attachment

- fixed – фоновое изображение неподвижно – прокручивается только содержимое  элемента;

- scroll - фоновое изображение прокручивается вместе с содержимым элемента.

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- scroll

Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-attachment. Значение fixed </title>

<style type="text/css">
body {background-image:url(../img/peng_128.gif);
background-repeat:repeat-y;
background-attachment:fixed}
</style>

</head>
<body>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
</body>
</html>
Результат
Как видно из примера: фоновое изображение (повторяющийся по вертикали пингвин) неподвижно. Прокручивается только содержимое страницы!
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-attachment. Значение scroll </title>

<style type="text/css">
body {background-image:url(../img/peng_128.gif);
background-repeat:repeat-y;
background-attachment:scroll}
</style>

</head>
<body>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
</body>
</html>
Результат
В этом примере - наоборот: фоновое изображение прокручивается вместе с содержимым страницы!


Все cвойства CSS

CSS по шагам