CSS-свойство `background-attachment`

Свойство background-attachment CSS задаёт, фиксируется ли положение фонового изображения относительно области просмотра или прокручивается вместе с содержащим его блоком.

Попробуйте

background-attachment: scroll;

background-attachment: fixed;

background-attachment: local;

background-attachment: fixed, scroll;

background-attachment: scroll, fixed;

<section id="default-example">
  <div id="example-element">
    <p>
      From there to here<br />
      from here to there,<br />
      Funny things<br />
      Are everywhere.
    </p>
    <p>--Dr. Seuss</p>
  </div>
</section>

body {
  overflow: scroll;
}

#default-example {
  height: 600px;
}

#example-element {
  max-width: 20rem;
  height: 100%;
  background:
    url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem
      no-repeat,
    url("/shared-assets/images/examples/moon.jpg") center / 10rem;
  font-size: 1.2rem;
  font-weight: bolder;
  overflow: auto;
  padding: 20px;
  color: red;
  text-shadow:
    0 0 0.5rem black,
    0 0 0.5rem black;
}

Синтаксис

/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;

Значения

Это свойство задаётся одним или несколькими разделёнными запятыми ключевыми словами:

fixed

Фон фиксируется относительно области просмотра. Даже если у элемента есть механизм прокрутки, фон не перемещается вместе с элементом. Если задано это значение, свойство background-origin игнорируется.

local

Фон фиксируется относительно содержимого элемента. Если у элемента есть механизм прокрутки, фон прокручивается вместе с содержимым элемента, а область отрисовки фона и область позиционирования фона задаются относительно прокручиваемой области элемента, а не относительно ограничивающей её рамки.

scroll

Фон фиксируется относительно самого элемента и не прокручивается вместе с его содержимым. (По сути, он привязан к рамке элемента.)

Формальное определение

Формальный синтаксис

background-attachment = 
  <attachment>#

<attachment> = 
  scroll |
  fixed |
  local

Примеры

Базовый пример

HTML

Добавим маркированный список (<ul>) с несколькими элементами списка (<li>).

<ul>
  <li>One fish</li>
  <li>Two fish</li>
  <li>Red fish</li>
  <li>Blue fish</li>
  <li>Black fish</li>
  <li>Blue fish</li>
  <li>Old fish</li>
  <li>New fish.</li>
  <li>This one has a little star.</li>
  <li>This one has a little car.</li>
  <li>Say! What a lot</li>
  <li>Of fish there are.</li>
</ul>

CSS

Зададим background-image и установим background-attachment в значение fixed. Также зададим height, width и overflow, чтобы элемент прокручивался.

ul {
  background-image: url("star-solid.gif");
  background-attachment: fixed;

  width: 300px;
  height: 70px;
  overflow: scroll;
}

Результат

Обратите внимание: при прокрутке переполненного текста фон остаётся зафиксированным относительно области просмотра списка.

Несколько фоновых изображений

Это свойство поддерживает несколько фоновых изображений. Для каждого фона можно задать отдельное значение <attachment>, разделив их запятыми. Каждое изображение сопоставляется с соответствующим типом <attachment> в порядке их указания.

HTML

Добавим всю поэму доктора Сьюза.

<div>
  <ul>
    <li>One fish</li>
    <li>Two fish</li>
    <li>Red fish</li>
    <li>Blue fish</li>
    <li>Black fish</li>
    <li>Blue fish</li>
    <li>Old fish</li>
    <li>New fish.</li>
    <li>This one has a little star.</li>
    <li>This one has a little car.</li>
    <li>Say! What a lot</li>
    <li>Of fish there are.</li>
    <li>Yes. Some are red. And some are blue.</li>
    <li>Some are old. And some are new.</li>
    <li>Some are sad.</li>
    <li>And some are glad.</li>
    <li>And some are very, very bad.</li>
    <li>Why are they</li>
    <li>Sad and glad and bad?</li>
    <li>I do not know.</li>
    <li>Go ask your dad.</li>
    <li>Some are thin.</li>
    <li>And some are fat.</li>
    <li>The fat one has</li>
    <li>A yellow hat.</li>
    <li>From there to here, from here to there,</li>
    <li>Funny things</li>
    <li>Are everywhere.</li>
  </ul>
  <p>--Dr. Seuss</p>
</div>

CSS

Зададим height, width и overflow для родительского элемента <div>, чтобы содержимое прокручивалось.

Зададим для списка два фоновых изображения, разделённых запятой, и установим background-attachment в значение fixed, scroll, то есть первое фоновое изображение будет fixed, а второе — scroll. Установим background-repeat, чтобы оба фоновых изображения повторялись по вертикали, и разделим их с помощью свойства background-position.

div {
  width: 300px;
  height: 200px;
  overflow: scroll;
}
ul {
  background-image: url("star-solid.gif"), url("star-transparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: repeat-y;
  background-position:
    0 0,
    100px 0;
}

Результат

Обратите внимание: первое фоновое изображение зафиксировано относительно области просмотра, а второе — относительно списка.

Спецификации

Совместимость с браузерами

См. также

• Другие CSS-свойства background:
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
• Использование нескольких фонов
• Модуль «Фоны и границы CSS»