«Единственный способ творить великие дела – это любить то, что ты делаешь»
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
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации

CSS по шагам

Тематические публикации