background-position чуть подробнее

В общем, background-position — очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения.

body {
  background-position: 100px 5px; 
}

Есть несколько вариантов синтаксиса, чтобы указать позицию фона:

• Числовое значение в пикселях (100px 5px).
• Значение в процентах (100% 5%).
• Ключевое слово (top right).

Соответственно, числовое и процентное значение указывает на сколько сместить фон от левой и от верхней сторон блока, а ключевое слово указывает к какой стороне фон будет прижат — top right означает, что фон будет прижат кверху и правой стороне.

По умолчанию, значение background-position: 0 0; — что означает, что фон прижат кверху блока слева.

Это всё просто и понятно, но я не зря держал эту статью долгое время в черновиках. Настало время раскрыть несколько малоизвестных особенностей свойства background-position.

Позицию фона можно указать одним значением

• center — тут все понятно, изображение будет по центру блока и по горизонтали, и относительно вертикали.
• top, left, bottom, right — а здесь уже интереснее. Указывается край возле которого нужно поместить элемент. А для второго параметра устанавливается значение 50%, таким образом элемент размещается в середине указанной стороны. top — значит фоновая картинка будет по центру сверху и тд.
• 10% или 25px — процентное или числовое значение означает, что фон будет смещен по горизонтали от левого края на указанное значение (по оси X), но при этом по вертикали (по оси Y) фон будет смещен на 50%, то есть будет по центру.

В чем особенность использования одного значения, что многие ожидают, что второе значение или будет равно 0, или будет равно такому же значению, как указано. Но как видно, то второе значение будет равно 50%. Это нужно просто запомнить.

Позицию фона можно указать тремя-четырьмя значениями

Это самая интересная фишка, и, как ни странно, о ней очень многие не знают.

Синтаксис из трех или четырех значений чередуется между ключевыми словами и единицами длины или процентов. Вы можете использовать любое из значений ключевого слова, кромеcenter для трех- или четырехзначного объявления background-position.

Когда вы указываете три значения , браузер интерпретирует «отсутствующее» четвертое значение как 0. Вот пример трех значений background-position:

body {
  background-position: right 45px bottom; 
}

Это расположит фоновое изображение на 45 пикселей справа и на 0 пикселей снизу контейнера.

Вот пример четырехзначного значенияbackground-position :

body {
  background-position: right 45px bottom 20px; 
}

Это правило помещает фоновое изображение на 45 пикселей справа и 20 пикселей снизу контейнера.

Обратите внимание на порядок значений в приведенных выше примерах: ключевые слова и единицы длины. Три или четыре значения background-positionдолжны следовать этому формату, а ключевое слово должно предшествовать длине или процентной единице.

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

Пример позиционирования фона с помощью одно-, двух-, трех- и четырехзначных значений

See the Pen background-position 1, 2, 3, and 4 value syntax by Denis (@deniscreative) on CodePen.dark