background-position

background — position

Фоновая картинка подчиняется этому свойству и занимает нужную позицию.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.

Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element">div>    Скопировать Скопировано Не удалось скопировать   

 .element  background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat;> .element  background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat; >    Скопировать Скопировано Не удалось скопировать   

Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.

Для этого мы изменим значение свойства background — position на нужное нам: 100 % 100 % или bottom right . Они равнозначны.

 .element  background-position: 100% 100%;> .element  background-position: 100% 100%; >    Скопировать Скопировано Не удалось скопировать   

Или при помощи ключевых слов:

 .element  background-position: bottom right;> .element  background-position: bottom right; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Ключевые слова

Скопировать ссылку «Ключевые слова» Скопировано

Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.

 .element  background-position: left top;> .element  background-position: left top; >    Скопировать Скопировано Не удалось скопировать   

 .element  background-position: center;> .element  background-position: center; >    Скопировать Скопировано Не удалось скопировать   

По центру по горизонтали и у нижнего края:

 .element  background-position: center bottom;> .element  background-position: center bottom; >    Скопировать Скопировано Не удалось скопировать   

Пиксели или другие единицы измерения длины

Скопировать ссылку «Пиксели или другие единицы измерения длины» Скопировано

Можно указать конкретное положение картинки в блоке.

10 px от левого края и 150 px от верхнего края:

 .element  background-position: 10px 150px;> .element  background-position: 10px 150px; >    Скопировать Скопировано Не удалось скопировать   

1 rem от левого края и по центру между верхом и низом:

 .element  background-position: 1rem;> .element  background-position: 1rem; >    Скопировать Скопировано Не удалось скопировать   

15 единиц ширины от левого края и 25 единиц высоты от верха:

 .element  background-position: 15vw 25vh;> .element  background-position: 15vw 25vh; >    Скопировать Скопировано Не удалось скопировать   

Проценты

Скопировать ссылку «Проценты» Скопировано

Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50 % , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0 % 0 % ставит картинку в левый верхний угол, а 100 % 100 % — в правый нижний.

 .element  background-position: 100% 100%;> .element  background-position: 100% 100%; >    Скопировать Скопировано Не удалось скопировать   

 .element  background-position: 50% 50%;> .element  background-position: 50% 50%; >    Скопировать Скопировано Не удалось скопировать   

 .element  background-position: 15% 5%;> .element  background-position: 15% 5%; >    Скопировать Скопировано Не удалось скопировать   

Если развернуть запись 15 % 5 % подробнее, то станет понятнее, как работают проценты в этом случае:

• Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
• Над картинкой 5% свободного места, а под ней — оставшиеся 95%.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство положения фона не наследуется.

💡 Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.

💡 Значение по умолчанию — 0% 0% (левый верхний угол).

💡 Если указано только одно значение, то второе подставляется автоматически и равняется 50 % . То есть значение 100 % расположит картинку по центру правого края.

💡 Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50 % 50 % и в этом случае совмещает центр картинки с центром элемента, а 100 % 100 % — правый нижний угол картинки с правым нижним углом элемента.

💡 Если картинка занимает всё пространство блока, то background — position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.

💡 Изменение положения фона можно анимировать при помощи свойства transition 🥳

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background — position : center или background — position : 50 % 50 % — в качестве подстраховки от фатальной поломки вёрстки.

🛠 Можно встретить такую запись: background — position : right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.

🛠 Помимо перечисленных вариантов можно использовать функцию calc ( ) для указания более гибкого значения.

Источник

background-position

Задает начальное положение фонового изображения, установленного с помощью свойства background-image . В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис

background-position: [left | center | right | | ] || [top | center | bottom | | ] | inherit

= [left | center | right | | ] || [top | center | bottom | | ] | inherit.

Значения

У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• right top = top right = 100% 0% (в правом верхнем углу)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• center = center center = 50% 50% (по центру)
• right = right center = center right = 100% 50% (по правому краю и по центру)
• bottom left = left bottom = 0% 100% (в левом нижнем углу)
• bottom = bottom center = center bottom = 50% 100% (по центру внизу)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

При inherit значение наследуется у родителя элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

       
.
  

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

CSS по теме

Источник

background-position

Задает начальное положение фонового изображения, установленного с помощью свойства background-image . В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис

background-position: [left | center | right | | ] || [top | center | bottom | | ] | inherit

= [left | center | right | | ] || [top | center | bottom | | ] | inherit.

Значения

У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• right top = top right = 100% 0% (в правом верхнем углу)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• center = center center = 50% 50% (по центру)
• right = right center = center right = 100% 50% (по правому краю и по центру)
• bottom left = left bottom = 0% 100% (в левом нижнем углу)
• bottom = bottom center = center bottom = 50% 100% (по центру внизу)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

При inherit значение наследуется у родителя элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

       
.
  

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

CSS по теме

Источник