Свойство 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,
което е свойство-съкращение за фон