Свойство background-attachment

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

Синтаксис

cssселектор {
  background-attachment: fixed | scroll | local;
}

Значения

Значение	Описание
`fixed`	Картинка фона будет неподвижной, а текст будет скользить по ней.
`scroll`	Картинка фона будет прокручиваться вместе с текстом.
`local`	Фон фиксируется с учетом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остается на месте.

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

Пример . Значение scroll

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

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Пример . Значение fixed

А теперь свойство background-attachment установлено в значение fixed. Прокрутите элемент по вертикали - вы увидите, как текст скользит по фону:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Смотрите также

свойство background,
представляющее собой свойство-сокращение для фона