background-position: положение фона в области
background-position задаёт выравнивание фонового изображения внутри области позиционирования.
Назначение
background-position задаёт выравнивание фонового изображения внутри области позиционирования.
Как это работает
Ключевые слова left, center и right можно сочетать с вертикальными top и bottom. Проценты соотносят точку изображения с соответствующей точкой области, а не просто сдвигают его на долю ширины контейнера.
Пример
<style>
.box{height:160px;border:1px solid;background-image:linear-gradient(#11694e,#11694e);background-size:60px 40px;background-repeat:no-repeat;background-position:right bottom}
</style>
<div class="box" aria-label="Зелёный прямоугольник в правом нижнем углу"></div>Что должно получиться
Небольшой фон расположен у правого нижнего края. Это позиционирование графического слоя, а не абсолютное позиционирование дочернего HTML-элемента.
Граница применения и частая ошибка
При одинаковом размере фона и области процентное перемещение может быть незаметно. Сначала проверьте background-size и наличие свободного места или обрезки.
Самостоятельная проверка
Переключите right bottom на left top, затем задайте фону размер 100% 100%. Объясните, почему во втором случае выравнивание перестало визуально что-либо менять.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.