Background-position: позиционирование фона

Значения background-position

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


Ключевые слова для горизонтального позиционирования

  • — фоновый рисунок прилеплен к левой стороне элемента;
  • — фоновый рисунок расположен в центре оси x;
  • — фоновый рисунок прилеплен к правой стороне элемента.
div {
	background-position-x: left;
}

Ключевые слова для вертикального позиционирования

  • — фоновый рисунок прилеплен к верхней стороне элемента;
  • — фоновый рисунок расположен в центре оси y;
  • — фоновый рисунок прилеплен к нижней стороне элемента.
div {
	background-position-y: bottom;
}

Сокращенная запись для двух осей

Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

Ниже — различные примеры позиционирования фона с помощью ключевых слов:

background-position: top center; /* фон вверху по центру */
background-position: top right; /* фон в верхнем правом углу */
background-position: bottom left; /* фон в левом нижнем углу */
background-position: center right; /* фон справа по центру */

Значения можно менять местами — они будут работать так же.

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

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

Для позиционирования фона можно использовать и одно значение для двух осей сразу:

background-position: center; /* фон по центру */
background-position: left; /* фон слева по центру */
background-position: right; /* фон справа по центру */
background-position: top; /* фон вверху по центру */
background-position: bottom; /* фон внизу по центру */

Точные значения в единицах измерения CSS

Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:

div {
background-position: 10px 25px;
}

Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:

div {
background-position: right 15px bottom 40px;
}

Здесь ключевые слова и говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, — это расстояние между фоном и правой стороной элемента, а — расстояние между фоном и нижней стороной элемента.

Процентные значения

Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.

Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:

Обратите внимание: значение идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:


CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Make percentage behave differently

In case we really need to have the size of the image equal to the container size and move it using percentage like pixel we can consider the below ideas.

Using pseudo element as a background layer:

We should note that translate consider the size of the pseudo element but since it’s the same as the container we won’t have any issue. We can also use/ but will have better performance.

Using background-origin

The trick is to have padding, restrict the origin to content-box and make the size bigger than to cover the padding and have the image fill the container.

In the above, I made the padding half the size so logically I need to use in to rectify. For the , it’s now easy to find the needed value based on the above explanation.

Another example:

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Special cases


Using values outside the range allows us to hide the background image, but how do we find the exact values in order to completely hide the image?

Let’s consider the below illustration:

Our image has a width and the container a width and we need to find the value of . From the figure we can obtain the following formula:

If the container size is and the image is then is so (we add of course the negative sign and it’s ).

We can make this more generic if we consider percentage values with instead of fixed values. Suppose the is . Then we will have , and the formula will be

Adding the negative sign it will be .

Now if we want to hide the image on the right side, we do the same logic on the right (we consider a mirror of the previous illustration), but since we will always consider the left edge to find the percentage we need to add .

The new percentage is , and the formula will be .

Here is an animation to illustrate the above calculation:

Let’s calculate some values:

When , we have a equal to , and the percentage values will be from to . In this case, we started with a negative value and ended with a positive one because the size of the image is smaller than the size of the container. If we consider the last case () the is equal to , and the percentage values will be from to . We started with a positive value and ended with a negative one because the size of the image is bigger than the size of the container.

This confirms what we said previously: to shift an image to the left we need negative values if the size is small, but we need positive values if the size is big (same thing for the right).

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

background-image

Поскольку простых цветов, как правило, недостаточно, CSS позволяет применять изображения в качестве фона элементов.

Для добавления фонового изображения требуется указать только его URL:


Поведение изображения (как оно повторяется, где расположено, какой у него размер) определяется другими свойствами фона. background-image задаёт только, какое изображение использовать.

Имейте в виду, что элемент HTML не принимает во внимание размеры фонового изображения. Даже если изображение больше, чем элемент, к которому оно применяется, элемент не изменит свои размеры, чтобы соответствовать изображению, поскольку изображение является чисто декоративным и оно здесь для поддержки элемента

More Examples

Example

A background-image that will scroll with the page (scroll). This is default:

body {   background-image: url(«img_tree.gif»);   background-repeat: no-repeat;   background-attachment: scroll; }

Example

How to create a simple parallax scrolling effect (create an illusion of 3D depth):

.fixed-bg {  /* The background image */  background-image: url(«img_tree.gif»);   /* Set a specified height, or the minimum height for the background image */   min-height: 500px;  /* Set background image to fixed (don’t scroll along with the page) */   background-attachment: fixed;  /* Center the background image */   background-position: center;  /* Set the background image to no repeat */   background-repeat: no-repeat;  /* Scale the background image to be as large as possible */   background-size: cover;}

Changing the reference

In the above calculations, we always considered the top/left corner of the image and the container in order to apply our logic either for pixel values or percentage values. This reference can be changed by adding more values to .

By default is equivalent to (position at from the and at from the ). By adjusting and/or we change the reference and how the image is placed. Here are some examples:

It’s clear that for the value we can only use and (the horizontal position) and with the value we can only use and (the vertical position). With all the different combinations we can logically obtain the 4 different corners.

This feature is also useful in order to optimize some calculation. In the example of the special cases section, we did a first calculation to hide the image on the left then another one to hide it on the right. If we consider changing the reference we only need to do one calculation. We take the formula used for the left side and we use the same on the right side.

Here is the new version:

For we will no more animate from to BUT it will be from to .

Here is another example using pixel values where we can clearly see how easy is to deal with the calculation when changing the reference:

It would be tricky to achieve the same animation by keeping the same reference. So if we want to do a symmetrical animation we do our logic on one side and use the same on the other side by changing the reference.

CSS Syntax

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

Разница между и фоновыми изображениями

Элемент <img> предназначен для изображений, которые являются частью содержимого, в то время как фоновые изображения в CSS чисто декоративные.

Логотип компании, эскизы галереи, изображение продукта и др. — всё это считается содержимым и для него следует использовать элемент <img>.

Диагональный узор, красивый пейзаж, иконка корзины и др. — их можно рассматривать как декоративные, так как они поддерживают содержимое, но не являются его частью. Если бы они исчезли, у веб-страницы по-прежнему сохранится смысл.

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

Просто спросите себя, важно ли для страницы изображение, которое вы используете. Если да, то применяйте элемент


С этим читают