Дмитрий Валак
Блог Верстальщика

Секреты CSS. Background-position.

Иногда нужно спозиционировать фоновое изображение в правом нижнем углу, но с небольшим отступом от правого и нижнего краев. Первое, что приходит в голову, это использовать background-position: 95% 95%;, но тогда мы получим не совсем точный отступ с нужных нам краев. Что делать если нам нужен отступ справа и снизу по 20px?

Для этого мы можем использовать конструкцию background-position: right 20px bottom 20px; и тогда мы получим фоное изображение, которое прижато к правому нижнему краю с отступом в 20px с обеих сторон.

Второй способ это использовать background-origin: content-box; и padding для контейнера, в котором находится наша фоновая картинка. Если у нас есть padding равный 20px для контейнера и мы использовали background-origin: content-box;, то наша фоновая картинка будет прижата к правому нижнему краю с отступом с обеих сторон равному нашему padding.

Пример:

See the Pen Background Position by Dmitry Valak (@dmitryvalak) on CodePen.