background-origin: откуда рассчитывается положение фона
background-origin выбирает область, относительно которой позиционируется фоновое изображение.
Назначение
background-origin выбирает область, относительно которой позиционируется фоновое изображение.
Как это работает
border-box, padding-box и content-box задают разные исходные области. background-clip отдельно определяет отсечение. Для fixed-фона правила позиционирования отличаются, поэтому такой случай проверяют отдельно.
Пример
<style>
.sample{padding:25px;border:8px solid #abc;min-height:130px;background-image:linear-gradient(#11694e,#11694e);background-repeat:no-repeat;background-size:20px 20px;background-origin:content-box}
</style>
<div class="sample">Начало фона связано с областью содержимого.</div>Что должно получиться
Зелёный квадрат начинается после рамки и padding. Текст может пересекаться с декоративным фоном: если этого не нужно, для изображения следует зарезервировать место отдельно.
Граница применения и частая ошибка
Если изменённый origin кажется неработающим, проверьте размер изображения и повторение. Большой повторяемый узор может скрывать сдвиг, заметный у одного маленького фрагмента.
Самостоятельная проверка
Переключите content-box на padding-box и сравните положение зелёного квадрата. Оставьте background-repeat:no-repeat, чтобы не спутать начальную точку с соседней плиткой.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.