Свойство 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>
<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>
<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>
Результат
В этом примере - наоборот: фоновое изображение прокручивается вместе с содержимым страницы!
