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-attachment

The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

Try it

Syntax

/* Keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* Global values */ background-attachment: inherit; background-attachment: initial; background-attachment: revert; background-attachment: revert-layer; background-attachment: unset; 

The background-attachment property is specified as one of the keyword values from the list below.

Values

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element. (This is not compatible with background-clip: text .)

The background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)

Formal definition

Formal syntax

Examples

Simple example

HTML

p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. p> 

CSS

p  background-image: url("starsolid.gif"); background-attachment: fixed; > 

Result

Multiple background images

This property supports multiple background images. You can specify a different for each background, separated by commas. Each image is matched with the corresponding type, from first specified to last.

HTML

p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted! p> 

CSS

p  background-image: url("starsolid.gif"), url("startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

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 по теме

Источник