Позиционирование фона (background-position): Тренажер CSS

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

На этой странице собраны упражнения для отработки навыков позиционирования фонового изображения внутри элемента с помощью CSS свойства `background-position`. Задания варьируются от использования базовых ключевых слов до задания точных координат с помощью пикселей, процентов и смещений от краев. Каждое задание предоставляет HTML-структуру и CSS-стили, в которых вам нужно будет заполнить пропуски, чтобы добиться нужного визуального результата. Это поможет вам лучше понять и запомнить, как управлять положением фона.

Список тем

Позиционирование фона в левый верхний угол

В этом задании у вас есть блок с фоновым изображением. Ваша задача — используя свойство позиционирования фона, разместить изображение в левом верхнем углу блока. Это стандартное поведение, но важно явно указать его для практики.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position`. Для размещения фона в левом верхнем углу можно использовать ключевые слова `left top` или `top left`. Также можно использовать значения `0% 0%` или `0px 0px`.

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

Результат

Сообщения

Выполнить

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

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

Центрирование фонового изображения

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

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat;
  background-position: input1;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat;
  background-position: input1;
}

HTML

<div class="image-box"></div>

Для центрирования фона используйте свойство `background-position` со значением `center`. Можно также использовать `center center` или `50% 50%`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование фона в правый нижний угол

Разместите фоновое изображение в правом нижнем углу контейнера. Используйте комбинацию ключевых слов для горизонтального и вертикального позиционирования.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position`. Чтобы разместить фон в правом нижнем углу, укажите значения `right bottom` или `bottom right`. Также можно использовать `100% 100%`.

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

Результат

Сообщения

Выполнить

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

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

Горизонтальное выравнивание по правому краю

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

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/5.png");
  background-repeat: no-repeat;
  background-position: input1;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/5.png");
  background-repeat: no-repeat;
  background-position: input1;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position`. Если указать только одно ключевое слово, отвечающее за горизонтальное положение (`left`, `center` или `right`), второе значение автоматически станет `center`. Вам нужно указать `right`.

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

Результат

Сообщения

Выполнить

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

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

Вертикальное выравнивание по верхнему краю

Аналогично предыдущему заданию, но теперь нужно выровнять фоновое изображение по верхнему краю блока. Горизонтальное положение должно остаться по центру (значение по умолчанию, если указано только одно вертикальное ключевое слово).

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat;
  background-position: input1;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat;
  background-position: input1;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position`. Если указать только одно ключевое слово, отвечающее за вертикальное положение (`top`, `center` или `bottom`), второе значение (горизонтальное) автоматически станет `center`. Вам нужно указать `top`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование с помощью пикселей

Иногда требуется задать точное положение фона. Установите фоновое изображение так, чтобы его левый верхний угол находился на расстоянии 20 пикселей от левого края и 50 пикселей от верхнего края блока.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position` с двумя значениями в пикселях. Первое значение задает смещение по горизонтали (ось X), второе - по вертикали (ось Y). Вам нужны значения `20px 50px`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование с помощью процентов

Используйте процентные значения для позиционирования фона. Установите фон так, чтобы точка на изображении, находящаяся на 10% его ширины и 90% его высоты, совпадала с точкой в блоке, находящейся на 10% ширины и 90% высоты блока.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/8.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/8.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position` с двумя процентными значениями. Первое значение - горизонтальное положение, второе - вертикальное. Вам нужны значения `10% 90%`.

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

Результат

Сообщения

Выполнить

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

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

Смешанное позиционирование (ключевое слово и пиксели)

Можно комбинировать ключевые слова и числовые значения. Расположите фоновое изображение по центру горизонтально и на расстоянии 30 пикселей от верхнего края блока.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/9.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/9.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position`. Первым значением укажите ключевое слово `center` для горизонтального позиционирования, а вторым - значение `30px` для вертикального смещения от верхнего края.

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

Результат

Сообщения

Выполнить

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

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

Смешанное позиционирование (ключевое слово и проценты)

Еще один пример смешанного позиционирования. Расположите фоновое изображение у правого края блока и на расстоянии 10% от верхнего края блока.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat;
  background-position: input1 input2;
}

HTML

<div class="image-box"></div>

Используйте свойство `background-position`. Первым значением укажите ключевое слово `right` для горизонтального позиционирования, а вторым - значение `10%` для вертикального смещения.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование со смещением от краев (4 значения)

Используйте синтаксис с четырьмя значениями для позиционирования фона. Расположите изображение на расстоянии 10 пикселей от верхнего края и 20 пикселей от левого края блока.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat;
  background-position: input1 input2 input3 input4;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat;
  background-position: input1 input2 input3 input4;
}

HTML

<div class="image-box"></div>

Свойство `background-position` может принимать 3 или 4 значения. Формат с 4 значениями: `<сторона-X> <смещение-X> <сторона-Y> <смещение-Y>`. Чтобы сместить на 20px от левого края и 10px от верхнего, используйте `left 20px top 10px`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование со смещением от правого и нижнего краев

Закрепим синтаксис с четырьмя значениями. Теперь расположите изображение на расстоянии 15 пикселей от правого края и 25 пикселей от нижнего края блока.

CSS

.image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  background-position: input1 input2 input3 input4;
}

                     .image-box {
  width: 300px;
  height: 250px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  background-position: input1 input2 input3 input4;
}

HTML

<div class="image-box"></div>

Используйте синтаксис с четырьмя значениями: `<сторона-X> <смещение-X> <сторона-Y> <смещение-Y>`. Чтобы сместить на 15px от правого края и 25px от нижнего, используйте `right 15px bottom 25px`.

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

Результат

Сообщения

Выполнить

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

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