Позиционирование фона с помощью background-position

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

Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра.

Классический случай — позиционирование с прилеганием к одной из сторон контейнера или по его центру. Для этого достаточно передать два параметра.

В общем виде синтаксис следующий:

background-position: [left | center | right | <проценты> | <размер>] || [top | center | bottom | <проценты> | <размер>]

Так мы можем задать либо относительное положение (left, top, center), либо абсолютное положение фона (в процентах или единицах вроде px, em, ..)

Будет валидным и такой вариант:

Он задаст центровку по обеим осям сразу.

Задать позиционирование отдельно по осям можно, используя background-position-x и background-position-y.

Позиционирование фона относительно правого края контейнера

Относительно левого края вы можете задать отступ фона, просто указав абсолютные величины. Как указать отступ относительно правого края?

Для этого нужно использовать следующий формат записи:

К сожалению, отдельно по осям расширенный формат записи пока не поддерживается.

Позиционирование фона относительно нижнего края контейнера

Аналогично предыдущему примеру работает позиционирование относительно нижней границы:

Мало букафф? Читайте есчо !

Псевдоклассы состояния контейнера input

Октябрь 24, 2018 г.

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT. :checked псевдокласс Позволяет писать стили для радио/чек - боксов, которые выделены (checked) в текущий момент. [crayon-6895942adbe29623946150/] ...

Читать

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

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

Читать

Почему не работает стиль :: before или :: after?

Октябрь 22, 2017 г.

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут "не сработать"? ...

Читать

Подчеркиваем текст или бек-граунд для текста

Апрель 4, 2023 г.

VS Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво. Вместо зеленой полоски, смотрящейся ...

Читать
 

Комментарии к «Позиционирование фона с помощью background-position»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: