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

Определение и применение

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

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Попробуйте значения background-attachment

Прокрутите текст внутри блока. При scroll фон закреплён в блоке, при local движется с содержимым. При fixed фон привязан к окну предпросмотра, а не к основной странице.

Значение свойства

background-attachment: scroll

HTML и CSS примера
HTML
<div
  class="demo-target"
  tabindex="0"
  role="region"
  aria-label="Прокручиваемый пример"
>
  <p>Начало — прокрутите вниз</p>
  <p>Первый абзац</p>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
  <p>Четвёртый абзац</p>
  <p>Конец</p>
</div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  color: #172c3d;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  height: 210px;
  overflow: auto;
  background-image: repeating-linear-gradient(
    0deg,
    #d9edf8 0 40px,
    #ffe4bd 40px 80px
  );
  background-attachment: scroll;
}
.demo-target p {
  margin: 0 0 44px;
}

Поддержка браузерами

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.background-attachment
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
background-attachment✓1✓12✓1✓3.5✓1✓18✓4✓10.1✓3.2✓1.0✓4.4✓3.2
fixed✓1✓12✓2✓10.5✓15.4

Версия 15.4 выпущена в 2022 г.

Версия 14 выпущена в 2020 г. — Удалено в 15.4; Частичная поддержка

Примечание MDN (англ.)

fixed is recognized but has no effect. See related bug 219324.

Версия 3.1 выпущена в 2008 г. — Удалено в 14

✓18✓4✓14◐5

Версия 5 выпущена в 2011 г. — Частичная поддержка

Примечание MDN (англ.)

fixed is recognized but has no effect. See bug 275247.

✓1.0✓37◐5

Версия 5 выпущена в 2011 г. — Частичная поддержка

Примечание MDN (англ.)

fixed is recognized but has no effect. See bug 275247.

local✓1✓12✓25✓10.5✓15.4

Версия 15.4 выпущена в 2022 г.

Версия 13 выпущена в 2019 г. — Удалено в 15.4; Частичная поддержка

Примечание MDN (англ.)

local is recognized but has no effect. See bug 219324.

Версия 5 выпущена в 2010 г. — Удалено в 13

✓18✓25✓14✓15.4

Версия 15.4 выпущена в 2022 г.

Версия 13 выпущена в 2019 г. — Удалено в 15.4; Частичная поддержка

Примечание MDN (англ.)

local is recognized but has no effect. See bug 219324.

Версия 4.2 выпущена в 2010 г. — Удалено в 13

Примечание MDN (англ.)

If -webkit-overflow-scrolling: touch is set, then local has no effect.

✓1.0✓37✓15.4

Версия 15.4 выпущена в 2022 г.

Версия 13 выпущена в 2019 г. — Удалено в 15.4; Частичная поддержка

Примечание MDN (англ.)

local is recognized but has no effect. See bug 219324.

Версия 4.2 выпущена в 2010 г. — Удалено в 13

Примечание MDN (англ.)

If -webkit-overflow-scrolling: touch is set, then local has no effect.

Несколько фонов✓1✓12✓3.6✓10.5✓1.3✓18✓4✓11✓3.2✓1.0✓4.4✓3.2
scroll✓1✓12✓1✓15✓1✓18✓4✓14✓3.2✓1.0✓4.4✓3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

В Safari на iOS fixed распознаётся, но не фиксирует фон; проверяйте поведение на целевом устройстве. В учебном iframe окном просмотра служит область результата.

CSS синтаксис:

CSS
background-attachment: [ scroll | fixed | local ]#;

/* Глобальные значения */
background-attachment: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. # — одно или несколько значений через запятую для фоновых слоёв. Квадратные скобки группируют части записи.

JavaScript синтаксис:

JavaScript
element.style.backgroundAttachment = "scroll";

Начальное значение свойства

scroll.

Значения свойства

Значения background-attachment
Значение Описание
scroll Задний фон прокручивается вместе с элементом на странице, но остаётся неподвижным относительно его рамки при прокрутке содержимого. Начальное значение.
fixed Фон фиксируется относительно уровня просмотра.
local Фон позиционируется относительно содержимого элемента (прокручивается вместе с содержимым элемента).
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства background-attachment устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Для нескольких фоновых изображений значения перечисляют через запятую в порядке background-image: первый слой находится сверху. Короткий список повторяется до числа изображений, лишние значения не используются.

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

CSS Backgrounds and Borders Module Level 3.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений. Для нескольких слоёв используется повторяемый список ключевых слов.

Примеры, попробуйте сами

Фон при прокрутке содержимого

Прокрутите содержимое каждого блока. При scroll фон остаётся на месте внутри блока, при local перемещается вместе с текстом. Сравните положение рисунка.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: #fff;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
.caption,
.long-text p {
    display: inline-block;
    margin: 8px;
    padding: 4px;
    background: #fff;
    color: #172c3d;
}
.long-text {
    max-width: 160px;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="sample">
      <div class="long-text">
        <p>Строка 1. Прокрутите эту область.</p>
        <p>Строка 2. Прокрутите эту область.</p>
        <p>Строка 3. Прокрутите эту область.</p>
        <p>Строка 4. Прокрутите эту область.</p>
        <p>Строка 5. Прокрутите эту область.</p>
        <p>Строка 6. Прокрутите эту область.</p>
        <p>Строка 7. Прокрутите эту область.</p>
        <p>Строка 8. Прокрутите эту область.</p>
        <p>Строка 9. Прокрутите эту область.</p>
        <p>Строка 10. Прокрутите эту область.</p>
      </div>
    </div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="sample second">
      <div class="long-text">
        <p>Строка 1. Прокрутите эту область.</p>
        <p>Строка 2. Прокрутите эту область.</p>
        <p>Строка 3. Прокрутите эту область.</p>
        <p>Строка 4. Прокрутите эту область.</p>
        <p>Строка 5. Прокрутите эту область.</p>
        <p>Строка 6. Прокрутите эту область.</p>
        <p>Строка 7. Прокрутите эту область.</p>
        <p>Строка 8. Прокрутите эту область.</p>
        <p>Строка 9. Прокрутите эту область.</p>
        <p>Строка 10. Прокрутите эту область.</p>
      </div>
    </div>
  </section>
</div>
style.css
CSS
.sample {
    height: 220px;
    overflow: auto;
    background-image: conic-gradient(#e1e8ef 25%, #f8fafc 0 50%, #e1e8ef 0 75%, #f8fafc 0);
    background-size: 40px 40px;
    background-repeat: repeat;
    background-attachment: scroll;
}
.second {
    background-attachment: local;
}

Фон относительно окна

Прокручивайте сам результат внутри редактора: фон привязан к окну предпросмотра. Замените fixed на scroll и сравните. На мобильных браузерах поддержка fixed может отличаться.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: #fff;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
.caption,
.long-text p {
    display: inline-block;
    margin: 8px;
    padding: 4px;
    background: #fff;
    color: #172c3d;
}
.long-text {
    max-width: 160px;
}
.sample {
    margin-top: 80px;
    height: 600px;
}
body {
    padding-bottom: 180px;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Результат</h3>
    <div class="sample"><span class="caption">Результат</span></div>
  </section>
</div>
style.css
CSS
.sample {
    background-image: conic-gradient(#e1e8ef 25%, #f8fafc 0 50%, #e1e8ef 0 75%, #f8fafc 0);
    background-size: 40px 40px;
    background-repeat: repeat;
    background-attachment: fixed;
}