Фиксация фона (background-attachment): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

На этой странице собраны упражнения для отработки свойства `background-attachment`. Это свойство определяет, будет ли фоновое изображение элемента прокручиваться вместе с содержимым элемента или оставаться фиксированным относительно области просмотра (viewport) или самого элемента. Задания помогут понять и закрепить разницу между значениями `scroll`, `fixed` и `local`.

Список тем

Фиксированный фон для всей страницы

Сделайте так, чтобы фоновое изображение всей страницы оставалось неподвижным при прокрутке содержимого. Для этого нужно применить соответствующее свойство к элементу `body`.

CSS

body {
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 600px; /* Чтобы обеспечить прокрутку */
  /* --- Допишите код здесь --- */
  input1: input2;
  /* ------------------------- */
}

                     body {
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 600px; /* Чтобы обеспечить прокрутку */
  /* --- Допишите код здесь --- */
  input1: input2;
  /* ------------------------- */
}

HTML

<h1>Заголовок страницы</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

Используйте свойство `background-attachment` со значением `fixed`. Это зафиксирует фон относительно окна браузера (viewport), и он не будет двигаться при скролле.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Прокручиваемый фон (по умолчанию)

Установите фоновое изображение для страницы так, чтобы оно прокручивалось вместе с остальным содержимым. Это поведение используется по умолчанию, но для практики укажите его явно.

CSS

body {
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 600px; /* Чтобы обеспечить прокрутку */
  background-attachment: input1;
}

                     body {
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 600px; /* Чтобы обеспечить прокрутку */
  background-attachment: input1;
}

HTML

<h1>Заголовок страницы</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

Используйте свойство `background-attachment` со значением `scroll`. Это значение заставляет фон прокручиваться вместе с содержимым элемента (в данном случае, `body`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фон, прокручиваемый с контентом элемента

Создайте блок с фиксированной высотой и прокруткой. Установите для него фоновое изображение так, чтобы оно прокручивалось только вместе с содержимым *внутри* этого блока, а не при прокрутке всей страницы.

CSS

.scroll-box {
  height: 250px;
  width: 90%;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
  overflow: auto; /* Важно для появления прокрутки */
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 50px 50px;
  /* --- Допишите код здесь --- */
  input1: input2;
  /* ------------------------- */
}

body {
  min-height: 500px; /* Чтобы страница тоже могла скроллиться */
}

                     .scroll-box {
  height: 250px;
  width: 90%;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
  overflow: auto; /* Важно для появления прокрутки */
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 50px 50px;
  /* --- Допишите код здесь --- */
  input1: input2;
  /* ------------------------- */
}

body {
  min-height: 500px; /* Чтобы страница тоже могла скроллиться */
}

HTML

<h1>Прокрутка внутри блока</h1>
<div class="scroll-box">
  <p>Начало контента в блоке.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
  <p>Конец контента в блоке.</p>
</div>
<p>Текст вне блока для общей прокрутки страницы.</p>
<p>Еще текст вне блока.</p>

Для элемента с классом `.scroll-box` установите `background-attachment` в значение `local`. Также убедитесь, что у элемента есть `overflow: auto` или `overflow: scroll` и достаточная высота контента для появления полосы прокрутки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Фиксированный фон через shorthand свойство

Используйте сокращенное свойство `background`, чтобы установить фоновое изображение, цвет фона и одновременно зафиксировать фон так, чтобы он не прокручивался вместе со страницей.

CSS

body {
  /* Установите фон: цвет #e0e0e0, изображение 5.png без повтора, по центру, фиксированный */
  background: #e0e0e0 url("https://naytikurs.ru/img/5.png") no-repeat center center input1;
  min-height: 600px; /* Чтобы обеспечить прокрутку */
  background-size: contain;
}

                     body {
  /* Установите фон: цвет #e0e0e0, изображение 5.png без повтора, по центру, фиксированный */
  background: #e0e0e0 url("https://naytikurs.ru/img/5.png") no-repeat center center input1;
  min-height: 600px; /* Чтобы обеспечить прокрутку */
  background-size: contain;
}

HTML

<h1>Фиксированный фон (shorthand)</h1>
<p>Прокрутите страницу, чтобы увидеть эффект.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>

В значении shorthand свойства `background` добавьте ключевое слово `fixed` после указания других параметров, таких как цвет, URL изображения, повтор и позиция. Например: `background: #f0f0f0 url(...) no-repeat center center fixed;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Локальный фон через shorthand свойство

Примените shorthand свойство `background` к блоку с прокруткой (`.content-box`). Установите фоновое изображение и сделайте так, чтобы оно прокручивалось вместе с содержимым этого блока, используя значение `local`.

CSS

.content-box {
  height: 280px;
  width: 90%;
  margin: 20px auto;
  padding: 10px;
  border: 1px dashed blue;
  overflow: auto;
  /* Установите фон: изображение 6.png, без повтора, в левом верхнем углу, прокрутка локальная */
  background: url("https://naytikurs.ru/img/6.png") no-repeat top left input1;
  background-size: 40px;
}

body {
  min-height: 500px;
}

                     .content-box {
  height: 280px;
  width: 90%;
  margin: 20px auto;
  padding: 10px;
  border: 1px dashed blue;
  overflow: auto;
  /* Установите фон: изображение 6.png, без повтора, в левом верхнем углу, прокрутка локальная */
  background: url("https://naytikurs.ru/img/6.png") no-repeat top left input1;
  background-size: 40px;
}

body {
  min-height: 500px;
}

HTML

<h1>Локальный фон (shorthand)</h1>
<div class="content-box">
  <p>Начало контента.</p>
  <p>Прокрутите этот блок, чтобы увидеть, как фон движется вместе с текстом.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident.</p>
  <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Конец контента.</p>
</div>
<p>Текст вне блока.</p>

В значении shorthand свойства `background` для элемента `.content-box` добавьте ключевое слово `local`. Убедитесь, что у блока есть `overflow: auto` или `scroll`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сравнение fixed и scroll на одном элементе

В этом задании нужно применить два разных фоновых изображения к одному элементу (`body`). Первое изображение (7.png) должно быть зафиксировано (`fixed`), а второе (8.png) должно прокручиваться (`scroll`) вместе со страницей. Используйте множественные фоны.

CSS

body {
  background-image: url("https://naytikurs.ru/img/7.png"), url("https://naytikurs.ru/img/8.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: 100px, 80px;
  min-height: 700px; /* Для прокрутки */
  /* Задайте фиксацию для первого фона и прокрутку для второго */
  input1: input2, input3;
}

                     body {
  background-image: url("https://naytikurs.ru/img/7.png"), url("https://naytikurs.ru/img/8.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: 100px, 80px;
  min-height: 700px; /* Для прокрутки */
  /* Задайте фиксацию для первого фона и прокрутку для второго */
  input1: input2, input3;
}

HTML

<h1>Множественные фоны: Fixed и Scroll</h1>
<p>Прокрутите страницу. Одно изображение (слева вверху) должно оставаться на месте, другое (справа внизу) — прокручиваться.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>

Для задания множественных фонов перечислите их параметры через запятую. Свойство `background-attachment` также принимает значения через запятую, соответствующие каждому фону. Первому фону задайте `fixed`, второму — `scroll`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку