All you need to know about background-position
Tags: webdev, tutorial, beginners, css
Published: 2021-03-13 13:44:32

<sup>*Converting one of [my Stack Overflow answer](https://stackoverflow.com/a/51734530/8620333) to a post*</sup>

## Table of content

* [Pixel values](#pixel-values)
* [Percentage values](#percentage-values)
  * [What about gradients?](#what-about-gradients)
* [More in-depth](#more-indepth)
  * [Negative values (< 0%)](#negative-values-lt-0)
  * [Big values (> 100%)](#big-values-gt-100)
  * [Special cases](#special-cases)
* [Relation between pixel and percentage values](#relation-between-pixel-and-percentage-values)
* [Changing the reference](#changing-the-reference)
* [Combining pixel and percentage values](#combining-pixel-and-percentage-values)
* [Using background-origin](#using-backgroundorigin)
* [Making percentage behave like pixel](#making-percentage-behave-like-pixel)

----

When dealing with `background-position` we have two common situations: 
  1. We use pixel value (the trivial one)
  2. We use percentage value (the tricky one)

Let's start a thoroughly explanation and remove all ambiguity around `background-position`!

## Pixel values

When using pixel values, the reference is the top/left corner of the image, whatever the size is. It's like using top/left with a positioned element:

{% codepen https://codepen.io/t_afif/pen/dyqLGdQ %}

Note that other units like `em`, `ch`, etc, behave the same as `px`. They are called [lengths](https://www.w3.org/TR/css-values-3/#lengths). Our comparison can be generalized to *length* vs *percentage*. All you have to know is how each length is converted to pixels.

## Percentage values

When using percentage values, the reference is different from when you use pixel values; it's no longer the top/left corner:

{% codepen https://codepen.io/t_afif/pen/jOvRWzM %}

In this case, we need to consider two parameters: the size of the container AND the size of the image. Here is an illustration of how it works (I took a `background-position` equal to `30% 30%`):

![percentage](https://i.stack.imgur.com/D2tbV.png)

First, we consider the image to find the reference point we will use to place the image. It's the point **inside the image** that is positioned at `30% 30%` from the top/left corner considering **the size of the image** (like defined with the green lines). Then, we place that point **inside the container** at `30% 30%` from the top/left corner considering **the size of the container**.

From this logic, we can identify some trivial cases like

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `50% 50%` <sup>(center)</sup> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `100% 100%` <sup>(bottom right)</sup> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `100% 0%` <sup>(top right)</sup>

![](https://i.stack.imgur.com/j0MdL.png)

Here is the full list of the common values and their equivalence:

*  `left` = `left center` = `center left` = `0 50%`
* `right` = `right center` = `center right` = `100% 50%`
* `top` = `top center` = `center top` = `50% 0`
* `bottom` = `bottom center` = `center bottom` = `50% 100%`
* `center` = `center center` = `50% 50%`
* `top left` = `left top` = `0% 0%`
* `top right` = `right top` = `100% 0`
* `bottom left` = `left bottom` = `0 100%`
* `bottom right` = `right bottom` = `100% 100%`

Now it's clear that if the size of the image is **equal** to the size of the container then nothing will happen when using percentage values simply because all the positions are equivalent. The top/left of the image is already at the top/left (`0% 0%`) of the container, the center is already at the center (`50% 50%`), etc.

{% codepen https://codepen.io/t_afif/pen/abaxdYY %}

🏆 The first gold rule when using percentage values is: *the size of the image needs to be different from the size of the container*

### What about gradients?

The above logic is the same when applied to gradients since gradients are considered images, and by default, if you don't specify a `background-size`, a gradient's size **will be the size of its container**, unlike when using an image. This is the main issue that every developer faces when dealing with gradients.

If we refer to [the specification](https://www.w3.org/TR/css-backgrounds-3/#the-background-size) of the `background-size`, we can see how the problem arises:

>If both values are auto then **the intrinsic width and/or height of the image should be used**, if any, the missing dimension (if any) behaving as auto as described above. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for **contain**.

And

>contain
>
>Scale the image, while preserving its **intrinsic aspect ratio** (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

And also:

>A bitmap image (such as JPG) **always** has intrinsic dimensions and proportions.
>
>CSS `<gradient>`s **have no intrinsic dimensions or intrinsic proportions** <sup>[ref](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)</sup>

An image always has intrinsic values, so in most cases, it won't have the same size as its container, so `background-position` with percentage units will have an effect. Gradients don't have intrinsic values, thus a gradient's dimensions will be equal to the size of its container, and `background-position` with percentage values will never work unless we specify a `background-size` different from its container's dimensions.

🏆 The second gold rule when using perchance values is: *when using gradient always define a background-size*

---

## More in-depth

We saw in the above examples how `background-size` works when using values between `0%` and `100%`, but what about using negative values or a value bigger than `100%`? The logic is the same, but finding the reference point will be more tricky.

### Negative values (< 0%)

Let's suppose we want to place a background at `-50% 0`. In this case, the reference point will be outside the image. Here is an example: https://jsfiddle.net/no87qv2r/4/

![](https://i.stack.imgur.com/c9wiB.png)

As we can see in the illustration, we first consider `-50%` of the image, which is `-50px`, to define our reference point (i.e., `-50px` from the left edge of the image). Then we place that point at `-50%` considering the size of the container (`-100px` from the left edge of the container). Then we draw the image, and we obtain the above result. Only `100px` of the image is visible.

We may also notice that negative percentage values will behave the same as negative fixed values when the size of the image is **smaller** than the size of the container (both will shift the image to the left). In this case `-50% 0` is the same as `-50px 0` (https://jsfiddle.net/no87qv2r/5/).

If for example we increase the image size to `150px 150px`, `-50% 0` will be the same as `-25px 0`.

When we make the size bigger than the container, negative values will start shifting the image to the right (like with positive pixel values), which is logical since the `50%` of the image will increase while the `50%` of the container will remain the same.

If we consider the previous illustration, it's like increasing the top green line until it's bigger than the bottom one. So the sign only is not enough to know how the image will be shifted; we need to also consider the size.

{% codepen https://codepen.io/t_afif/pen/rNZbxrY %}

The same will logically apply to gradients:

{% codepen https://codepen.io/t_afif/pen/jOvRWvV %}

In the above, note the usage of the following syntax 

  `background:linear-gradient(to right,red,blue) -50% 0/50px 150px no-repeat` 

which means
  
   `background:[image or gradient] [background-position]/[background-size] no-repeat`

### Big values (> 100%)

Same logic as previously: if we define a background at `150% 0`, then we consider our reference point `150%` from the left edge (or `50%` from the right edge), then we place it `150%` from the left edge of the container: https://jsfiddle.net/no87qv2r/9/ (in this example, `150% 0` is equivalent to `150px 0`)

If we start increasing the `background-size` we will have the same behavior as previously demonstrated:

{% codepen https://codepen.io/t_afif/pen/qBMwbMM %}

### Special cases

Using values outside the range `[0% 100%]` allows us to hide the background image, but how do we find the exact values to completely hide the image?

Let's consider the below illustration:

![](https://i.stack.imgur.com/jynAr.png)

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

`p * Wp = p * Ws + Ws   <=>   p = Ws/(Wp - Ws)   with p in [0,1]`

If the container size is `200px` and the image is `100px` then p is `1` so `100%` (we add of course the negative sign and it's `-100%`).

We can make this more generic if we consider percentage values with `background-size` instead of fixed values. Suppose the `background-size` is `S%`. Then we will have
 
 `Ws = Wp * s (s in [0,1] and S=s*100)`

The first formula will be:

  `p = Ws/(Wp - Ws)   <=>   p = s / (1 - s)`

We add the negative sign and we get `p = s / (s - 1)`

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 `100%`.

We the define `p'%` to be equal to `100% + p%`, and the formula will be 

  `p' = 1 + p <=> p' = 1 + s / (1 - s) = 1 / (1 - s)`

Here is an animation to illustrate the above calculation:

{% codepen https://codepen.io/t_afif/pen/mdGgVGZ %}

Let's calculate some values:

When `s=0.5`, we have a `background-size` equal to `50%`, and the percentage values will be from `-100%` to `200%`. 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 (`s=2`) the `background-size` is equal to `200%`, and the percentage values will be from `200%` to `-100%`. 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.

🏆 We have our third gold rule: *to shift an image to the left we need negative values if the size is smaller than the size of the container, but we need positive values if the size is bigger than the size of the container (same thing for the right)*.

## Relation between pixel and percentage values

Let's define a way to calculate percentage values based on pixel values, or vice versa (i.e. the formula to convert between both). To do this we simply need to consider the reference points.

![](https://i.stack.imgur.com/WePVG.png)

When using pixel values, we will consider the blue lines and we will have `background-position:X Y`.

When using percentage values, we will consider the green lines and we will have `background-position:Px Py`.

The formula will be as follow: `X + Px * Ws = Px * Wp` where `Ws` is the width of the image and `Wp` is the width of the container (same formula for the Y-axis considering height).

We will have `X = Px * (Wp - Ws)`. From this formula we can validate the gold rules explained previously:

* When `Wp = Ws`, the formula is no longer valid, which confirms that percentage values have no effect when the size of the image is the same as the container; thus there is no relation between pixel and percentage values.
* `X` and `Px` will have the same sign when `Wp > Ws` and will have the opposite sign when `Wp < Ws`. This confirms that percentage values behave differently depending on the size of the image.
We can also express the formula differently if we consider percentage values of `background-size`. We will have `X = Px * Wp * (1 - s)`.

Here is an animation to illustrate the above calculation:

{% codepen https://codepen.io/t_afif/pen/OJoGMBP %}

## Changing the reference

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

By default `background-position: X Y` is equivalent to `background-position: left X top Y` (position at X from the left and at Y from the top). By adjusting `top` and/or `left` we change the reference and how the image is placed. 

Here are some examples:

{% codepen https://codepen.io/t_afif/pen/eYLoJbe %}

It's clear that with the `X` value we can only use `left` and `right` (the horizontal position) while with the `Y` value we can only use `bottom` and `top` (the vertical position). With all the different combinations we logically obtain the 4 different corners.

This feature is also useful to optimize some calculation. In the example of the [special cases section](#special-cases), we did the first calculation to hide the image on the left and 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:

{% codepen https://codepen.io/t_afif/pen/YzOMwdM %}

For `s=0.5` we will no more animate from `-100%` to `200%` BUT it will be from `left -100%` to `right -100%`.

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

{% codepen https://codepen.io/t_afif/pen/QWVPyYG %}

It would be tricky to achieve the same animation by keeping the same reference. 

🏆 Another gold rule :*if you want to have a symmetrical animation, do your logic on one side and use the same on the other side by changing the reference*.

## Combining pixel and percentage values

We can use `calc()` to do some complex calculation that involves different units. For example, we can write `width:calc(100px + 20% + 12em)` and the browser will calculate the computed value considering how each unit works and we will end with a pixel value (for this case).

What about `background-position`? If we write `calc(50% + 50px)`, will this be evaluated to a percentage value or a pixel value? will the pixel value be converted to a percentage or it's the opposite?

The result will not be converted to a pixel value or a percentage value, but rather both will be used together. `background-position` has special behavior when mixing percentage and pixel values inside `calc()` and the logic is as follows:

1. We first use the percentage value to position the image by applying all the logic related to percentage values.
2. We consider the position of (1) as the reference and we use the pixel value to position the image again by applying all the logic related to pixel values.

Doing `calc(50% + 50px)` means: center the image, then shift it by `50px` to the left.

This feature can simplify a lot of calculations. Here is an example:

{% codepen https://codepen.io/t_afif/pen/rNZbxPJ %}

It would be tedious to find the correct percentage or pixel values to place the 4 red squares like above, but by mixing both using `calc()` it is pretty easy.

Now, let's suppose we have something like this:  `calc(10% + 20px + 30% + -10px + 10% + 20px)`. How will the browser handle this?

In such cases, the browser will first evaluate each unit to obtain the simplified form `calc(X% + Ypx)` and then apply the above logic to position the image.

```
calc(10% + 20px + 30% + -10px + 10% + 20px) 
calc((10% + 30% + 10%) + (20px + -10px + 20px)) 
calc(50% + 30px)
```
Example: https://jsfiddle.net/no87qv2r/17/

Whatever the complexity of the formula is, the browser will always evaluate percentage and pixel values separately.

Here is more equivalent values if we consider `calc()`:

* `left X top Y` = `X Y`
* `right X top Y` = `calc(100% - X) Y`
* `left X bottom Y`  =  `X calc(100% - Y)`
* `right X bottom Y` = `calc(100% - X) calc(100% - Y)`

`X` and `Y` are **pixel values** and not percentages!

## Using background-origin

Here is another important property that can be used to alter the position of a background image. This property relies on the box model so let's get a quick reminder about how that works:

![](https://i.stack.imgur.com/wxYU7.png)

Each element has 3 different boxes inside it: border-box, padding-box, and the content-box. `background-origin` specifies which box we need to consider to do all our previous calculations.

Here is a self-explanatory example:

{% codepen https://codepen.io/t_afif/pen/mdGgVob %}

It's clear that when we don't have padding `content-box` is equivalent to `padding-box`, when we don't have border `border-box` is equivalent to `padding-box`, and with no padding and no border, all the 3 are equivalent.

It's important to notice that `background-size` is affected by this property when used with percentage values.

We also have the [`background-clip`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) property but this one doesn't affect the calculation. It only affects the visual result by clipping some part of the background.

## Making percentages behave like pixels

In case we need to have the size of the image (or the gradient) equal to the container size and move it using percentages like pixels we can consider the below ideas.

### Using pseudo-element as a background layer

{% codepen https://codepen.io/t_afif/pen/MWqRKxE %}

We should note that translate considers 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 `left`/`top` but `transform` will have better performance. Using this method we cannot have repetition.

### Using background-origin

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

{% codepen https://codepen.io/t_afif/pen/wvEZMbG %}

In the above, I made the padding equal to half the size so logically I need to use `200%` in `background-size` to rectify. For the `background-position`, it's now easy to find the needed value based on the previous explanation.

Another example:

{% codepen https://codepen.io/t_afif/pen/MWqRKdE %}

Using this method we can have repetition but since we are adding padding we won't be able to add content. To overcome this we can combine both methods to get the following:

{% codepen https://codepen.io/t_afif/pen/oNPObRV %}

### That's it! 

Now `background-position` has no more secrets for you. 👌

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

### <center>OR</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)