Сокращенная запись свойств фона: Тренажер CSS

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

В этой серии упражнений вы попрактикуетесь в использовании сокращенного свойства `background`. Это свойство позволяет установить несколько параметров фона элемента одновременно, делая ваш CSS код более лаконичным и читаемым. Задания построены от простого к сложному: начиная от установки одного значения (например, цвета) и заканчивая комбинацией нескольких параметров, таких как цвет, изображение, повторение, позиционирование и размер фона. Вам нужно будет заполнить пропущенные части CSS кода, чтобы достичь нужного визуального результата, который будет отображаться в окне предпросмотра.

Список тем

Установка цвета фона

Самое простое применение сокращенного свойства `background` — установка цвета фона. Заполните пропуск в CSS коде так, чтобы у элемента `div` установился сплошной синий цвет фона с помощью сокращенной записи.

CSS

div {
  width: 200px;
  height: 200px;
  input1: blue;
}

                     div {
  width: 200px;
  height: 200px;
  input1: blue;
}

HTML

<div></div>

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

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

Результат

Сообщения

Выполнить

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

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

Фон: цвет и изображение

Используйте сокращенную запись `background`, чтобы установить для элемента `div` одновременно и фоновый цвет (голубой - `lightblue`), и фоновое изображение. Изображение должно быть указано после цвета.

CSS

div {
  width: 300px;
  height: 250px;
  input1: lightblue url('https://naytikurs.ru/img/1.png');
}

                     div {
  width: 300px;
  height: 250px;
  input1: lightblue url('https://naytikurs.ru/img/1.png');
}

HTML

<div></div>

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

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

Результат

Сообщения

Выполнить

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

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

Фон: изображение без повторения

Задайте фоновое изображение для элемента `div` и укажите, чтобы оно не повторялось по осям X и Y. Используйте сокращенную запись `background`. Цвет фона задавать не нужно.

CSS

div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc; /* Добавим рамку для наглядности */
  background: url('https://naytikurs.ru/img/2.png') input1;
}

                     div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc; /* Добавим рамку для наглядности */
  background: url('https://naytikurs.ru/img/2.png') input1;
}

HTML

<div></div>

В сокращенной записи `background` используйте URL изображения и ключевое слово `no-repeat` для отмены повторения. Порядок: URL, затем `no-repeat`.

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

Результат

Сообщения

Выполнить

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

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

Фон: изображение по центру

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

CSS

div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/4.png') no-repeat input1;
}

                     div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/4.png') no-repeat input1;
}

HTML

<div></div>

Для позиционирования фона по центру используйте значение `center`. В сокращенной записи `background` укажите URL, затем `no-repeat`, а затем `center`.

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

Результат

Сообщения

Выполнить

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

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

Фон: изображение справа по центру

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

CSS

div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/5.png') no-repeat input1 input2;
}

                     div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/5.png') no-repeat input1 input2;
}

HTML

<div></div>

Для позиционирования фона можно использовать два значения: первое для горизонтального положения, второе для вертикального. Используйте `right` и `center`. Порядок в сокращенной записи: URL, `no-repeat`, `right center`.

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

Результат

Сообщения

Выполнить

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

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

Фон: Полная запись (цвет, изображение, повтор, позиция)

Используйте сокращенную запись `background`, чтобы установить для `div` светло-серый (`lightgray`) фоновый цвет, фоновое изображение, которое не повторяется и расположено в верхнем правом углу.

CSS

div {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  input1: lightgray url('https://naytikurs.ru/img/6.png') input2 input3 top;
}

                     div {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  input1: lightgray url('https://naytikurs.ru/img/6.png') input2 input3 top;
}

HTML

<div></div>

В сокращенной записи `background` можно комбинировать множество значений. Стандартный порядок: `background-color`, `background-image`, `background-repeat`, `background-position`. Укажите цвет `lightgray`, URL изображения, `no-repeat` и позицию `right top`.

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

Результат

Сообщения

Выполнить

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

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

Фон: Фиксированное изображение

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

CSS

div {
  width: 300px;
  height: 500px; /* Увеличим высоту для демонстрации прокрутки */
  border: 1px solid #ccc;
  overflow: auto; /* Добавим прокрутку, если контент не помещается */
  background: beige url('https://naytikurs.ru/img/7.png') no-repeat input1;
}

                     div {
  width: 300px;
  height: 500px; /* Увеличим высоту для демонстрации прокрутки */
  border: 1px solid #ccc;
  overflow: auto; /* Добавим прокрутку, если контент не помещается */
  background: beige url('https://naytikurs.ru/img/7.png') no-repeat input1;
}

HTML

<div>Тут много текста, чтобы появилась прокрутка внутри блока...<br>Прокрутите этот блок, чтобы увидеть эффект фиксированного фона.<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Конец текста.</div>

Для фиксации фона используется значение `fixed` (соответствует свойству `background-attachment`). Добавьте `fixed` в список значений свойства `background` после URL и `no-repeat`. Цвет фона `beige` должен идти первым.

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

Результат

Сообщения

Выполнить

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

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

Фон: Размер `cover`

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

CSS

div {
  width: 350px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/8.png') center input1 input2;
}

                     div {
  width: 350px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/8.png') center input1 input2;
}

HTML

<div></div>

Размер фона задается после позиции через слеш (`/`). Используйте значение `cover` для `background-size`. Полная запись будет выглядеть примерно так: `url(...) center / cover`.

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

Результат

Сообщения

Выполнить

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

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

Фон: Размер `contain`

Задайте фоновое изображение для `div` так, чтобы оно масштабировалось, полностью помещаясь внутри элемента без обрезки. Если пропорции изображения и элемента не совпадают, останутся пустые области. Используйте сокращенную запись `background`. Изображение должно быть по центру и не повторяться. Установите также светло-зеленый (`lightgreen`) цвет фона.

CSS

div {
  width: 350px;
  height: 250px;
  border: 1px solid #ccc;
  background: lightgreen url('https://naytikurs.ru/img/9.png') center / input2 no-repeat;
}

                     div {
  width: 350px;
  height: 250px;
  border: 1px solid #ccc;
  background: lightgreen url('https://naytikurs.ru/img/9.png') center / input2 no-repeat;
}

HTML

<div></div>

Используйте значение `contain` для `background-size`, указав его после позиции и слеша (`/`). Полная запись: `lightgreen url(...) center / input2 no-repeat`.

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

Результат

Сообщения

Выполнить

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

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

Фон: Комплексная задача

Примените все изученные свойства фона в одной сокращенной записи `background`. Установите: цвет фона `khaki`, изображение, которое не повторяется, выровнено по центру горизонтально и внизу вертикально (`center bottom`), прокручивается вместе с элементом (`scroll`) и масштабируется так, чтобы полностью поместиться в элемент (`contain`).

CSS

div {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  input1: khaki url('https://naytikurs.ru/img/1.png') center bottom / input5 input2 input3;
}

                     div {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  input1: khaki url('https://naytikurs.ru/img/1.png') center bottom / input5 input2 input3;
}

HTML

<div></div>

Соберите все значения в правильном порядке для свойства `background`: цвет, URL, позиция (`center bottom`), повторение (`no-repeat`), прокрутка (`scroll`), слеш (`/`) и размер (`contain`). Обратите внимание, что порядок некоторых значений (например, repeat, attachment, position) может быть произвольным до слеша, но стандартный порядок предпочтительнее.

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

Результат

Сообщения

Выполнить

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

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