Китегории

background-attachment

CSS	Internet Explorer			Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0	7.0	8.0+	1.0+	3.5+	1.0+	1.0+	2.1+	1.0+
3	9.0+			1.0+	10.5+	1.3+	3.6+	2.1+	1.0+

Краткая информация

Значение по умолчанию	scroll
Наследуется	Нет
Применяется	Ко всем элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment http://www.w3.org/TR/css3-background/#the-background-attachment

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

CSS2.1

background-attachment: fixed | scroll | inherit

CSS3

background-attachment: fixed | scroll | local[, fixed | scroll | local]*

Значения

fixed: Делает фоновое изображение элемента неподвижным.
scroll: Позволяет перемещаться фону вместе с содержимым.
inherit: Наследует значение родителя.
local: Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

Пример 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(images/help.png); /* Путь к фоновому изображению */
    background-attachment: fixed; /* Фиксируем фон веб-страницы */
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
    Пример текста
  </div>
 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(images/pattern-left.png), url(images/pattern-right.png);
    background-repeat: repeat-y, repeat-y;
    background-position: left, right;
    background-attachment: fixed, fixed;
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
  </div>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID«).style.backgroundAttachment

Браузеры

В браузере Internet Explorer 6 значение fixed работает только для тегов <body> или <html>.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Chrome поддерживает значение local с версии 4.0.

Safari поддерживает значение local с версии 5.0.

Firefox не понимает значение local.

Основное

HTML

CSS

Сайт