A Primer To Background Positioning In CSS

Applying background images to elements is probably one of the most used features in CSS, and many background properties exist that allow us to control different aspects of an element’s background.

An element can have more than one background image. If you want to apply more than one background image, you can provide them as a comma-separated list of values for the background-image property. The background-position property is used to specify the position of the background image, and this property is worth a deeper look because its different possible values have different results, some of which might be new to you if you are not very deep into CSS.

To keep the code and concepts throughout this article simple, we’ll be positioning one background image throughout the examples. But what applies to one background image applies to multiple images as well.


A background image is positioned inside what is called a background positioning area of an element. This background positioning area,as the name suggests, specifies the area inside which the background will be positioned, and has a coordinate system used to handle the positioning.

Before we dig into the concepts of positioning further, let’s first have a quick look at the CSS box model and see how it affects the positioning of background images inside an element.

The CSS Box Model Areas

An element in CSS has three areas, called boxes, defined on it: the border box, the padding box, and the content box. The border box is the area of the element that includes its entire innards plus the area underneath its border.

The padding box is the area of the element that excludes the border and includes the element’s content and the surrounding padding — specified using the padding property.

The content box is the area created by the element’s content, excluding any padding and border.

box-areas

An element’s box areas. Image Credit: The Codrops CSS Reference, background-origin entry.

There’s also a fourth area called the margin box which includes the element and its outer margin that you specify using the margin property.

When you give an element a background—be it an image or a solid color—that background is painted across the element’s padding area by default. (This behaviour can be modified using the background-origin property, but we’ll get to this shortly.)

In order to specify where exactly the background image will go inside the positioning area, this area needs a coordinate system used to translate the position values into. Let’s take a closer look at this coordinate system before we move forward.

An Element’s Coordinate System

By default, and due to the nature of an element’s box model in CSS, every element has a coordinate system established by its height and width. This coordinate system is used to position the element relative to other elements, and to position the element’s descendants relative to the element itself.

An HTML element has a coordinate system in CSS. SVG elements, on the other hand, don’t have a similar coordinate system because they are not governed by the concept of the box model.

The origin of the coordinate system in CSS is located at the top left corner of the element.

A background positioning area is also governed by a coordinate system established on that area, and is used to position the background image in that area. This coordinate system also has its origin at the top left corner of the positioning area.

Since the default positioning area is the padding box, then, by default, the origin of the background positioning area’s coordinate system is the top left corner of the padding box.

This means that when you apply a background image to an element, the browser will position the first and subsequent repetitions of the image starting from the top left corner of the padding area.

For example, suppose you have a background image applied to an element and you do not set that background image to repeat (so only one instance of that image is applied). The initial position of the background image inside the coordinate system is at the origin of the padding box’s coordinate system. So, the top left corner of the image is positioned at the top left corner of the padding box. (See live example below.)

See the Pen Adobe background-position by Sara Soueidan (@SaraSoueidan) on CodePen.

Using the background-position property we’ll talk about in this article, we can then change the position of the image inside that coordinate system.

But as we mentioned before, we can change the background positioning area and this, in turn, will change the origin used to position the image inside the element’s background area.

 

Changing The Background Positioning Area & Coordinate System Using background-origin

The background-origin property is used to change the origin of the coordinate system used to position the background image in the background positioning area.

It takes one of three values: padding-box (which is the default value, content-box and border-box.

Depending on the background positioning area you choose, the corresponding background origin — the origin of the coordinate system established on that area — will change, and so will the initial and default position of the background image.

The following live example shows the different background origin / positioning areas in action.

See the Pen Adobe background-origin — different values by Sara Soueidan (@SaraSoueidan) on CodePen.

For each background positioning area specified using background-origin, the coordinate system will “shift” to cover that area.

Then, we can specify the position of the background image in that coordinate system using the background-position property.

For the sake of simplicity, we will not be changing the default background positioning area of the element in the rest of this article. So all of our examples will be applied to an element whose padding area is the area inside which the background is positioned.

Positioning Background Images Using background-position

We saw in the previous section how the background image is positioned by default at the top left corner of the positioning area. This is due to the fact that the default position value for the background-position property is 0% 0%.

The default position is a percentage value. You can supply background-position with either a percentage value or an absolute value, that specify the offset of the image from one of the positioning area’s four edges (top, right, bottom, left).

offset-edges-and-system

An element’s offset edges and coordinate system in CSS.

In addition to percentage and absolute offset values, five offset keywords exist and can be used: top, right, bottom, left and center.

A position can be described by specifying one offset value (keyword, percentage, or length), two offset values (a combination of two of the three possible values), or four offset values (a keyword and a relative numerical value). (We’ll talk about these in more detail in the upcoming sections.)

background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

If you provide only one value, the second one is assumed to be center. If you provide two values, the first one determines the offset from the left edge—i.e. the horizontal position, and the second one is the offset down from the top edge—i.e. the vertical position.

background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */
background-position: top; /* equivalent to `top center` */
background-position: 50px; /* equivalent to `50px center` */

You can mix and match values, combining lengths with percentages and/or keywords. Note that a pair of keywords can be reordered while a combination of keyword and length or percentage cannot. So center left is valid while 50% left is not—it must be left 50%. When a combination of keyword and a length or percentage value is used, the first value always corresponds to the horizontal offset and the second value to the vertical offset.

As a matter of fact, the keywords are shorthand for specific percentage values. More specifically: top is equivalent to 0% offset from the top edge, bottom is equivalent to 100% offset from the top edge, left is equivalent to 0% offset from the left edge, and right is equivalent to 100% offset from the left edge and center is equivalent to 50% offset in whatever direction (horizontal or vertical) is it applied to.

Let’s start with how each possible value type works—this is probably the most important thing as there is a fundamental difference between the way absolute and percentage values are used by the browser to position background images. We’ll provide more examples as we go.

How Absolute Position Values Work

When you specify a position in absolute units, you’re offsetting the background image’s top left corner by the specified amount. In other words, the image will be moved so that its top left corner is positioned at the offsets specified in your background-position value.

The best way to explain and understand this is to visualise it, so here are two examples of absolute background position values and how they are interpreted by the browser to position the background image. The element in these two examples has 100px by 80px dimensions.

absolute-position-illustration

Positioning a background image using absolute values.

The absolute position can also be negative, in which case the image will be offset in the opposite direction from the edge.

negative-absolute-offset-illustration

Example showing an image offset using a negative offset position value.

Try changing the values of the background position in the following live example to see how the it affects the image. Try negative values too!

See the Pen Adobe background-position Example by Sara Soueidan (@SaraSoueidan) on CodePen.

How Percentage Position Values Work

Unlike the absolute length offset value which moves the element’s top left corner by a specified distance, a percentage X aligns the point at X% across (for horizontal) or down (for vertical) the image with the point at X% across (for horizontal) or down (for vertical) the container.

For example, the percentage value 0% 0% will align the point 0% 0% of the image with the point 0% 0% in the background positioning area’s coordinate system. The position value 50% 75% will align the point that is 50% across and 75% down the image, with the point that is located at 50% 75% in the background positioning area.

Again, a visual example explains it best. Notice how the position value specified is used to get the point of those coordinates inside the image and then aligns that point with the point of the same coordinates in the positioning area.

 

percentage-values-illustration

Positioning a background image using percentage values.

And as with absolute values, you can also specify the percentage offset in negative values, and those will move the background image by the specified value in the opposite direction of the corresponding axis. So a -10% -30% position will offset the image by 10% to the left of the left edge, and 30% upwards.

Play with the values in the following example to see how the background image position changes.

See the Pen Adobe background-position Example#2 by Sara Soueidan (@SaraSoueidan) on CodePen.


The positioning in the previous two examples is done relative to the top and left edges. Now let’s see how we can combine the offset keywords along with the numerical offset values (percentage or absolute) to position images across the background positioning area relative to any of the element’s four edges.

Offsetting Relative to Any Edge

In the examples from the previous two sections, we specified offsets and saw how they are used to offset the image with respect to the top and left edges—which is the default behaviour for one- or two-value positions.

When you combine offset keywords with numerical values for a four-value syntax, you can offset the background image from the right and bottom edges of the positioning area too.

In order to do that, all you have to do is specify the name of the edge you want to use followed by the amount (absolute or percentage) you want to offset it by.

For example, the following are examples of the four-value syntax:

background-position: top 1em right 3em; /* positions the background image 1em down the top edge and 3em left of the right edge */

background-position: right 1em bottom 1em; /* positions the background image 1em above the bottom edge and 1em to the left of the right edge */

background-position: left 20px bottom 50px;

If three out of four values are specified, the fourth value is assumed to be zero.

There is something to keep in mind when using the four-value syntax: When three or four values are given, then each percentage or length represents an offset and must be preceded by a keyword which specifies from which edge the offset is given. For example, background-position: bottom 10px right 20px represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero. If your provide two numerical offsets and one keyword, the value is invalid and the browser uses the default 0% 0% value.

To get a better grip of this, play with the values of the background-position property in the following live example. The crane background image is first positioned so that it is offset by 0 pixels from the bottom and 2em from the right edge.

See the Pen Adobe background-position by Sara Soueidan (@SaraSoueidan) on CodePen.

This is particularly useful for when you need to position an image at a defined distance from the right and bottom edges, which makes this task much simpler than having to calculate the relative offsets from the top and left edges.

Sizing, Repeating, Clipping and More!

Remember, you can apply multiple background images to an element. For every background image (provided as a list of comma-separated images to background-image), you can specify a corresponding background position; multiple positions are also comma-separated.

All in all, there are nine CSS properties that control the layout, positioning, sizing and painting of background images, including the shorthand background property that is used to set and reset other shorthand properties. Each property allows you to do one thing, and combined they give us great control over how to apply background images to all and any element in HTML. I hope this article has demystified the way positioning background images in CSS works.

In addition to the main background properties, an additional property now exists that allows us to apply blending effects to background images similar to the blending effects available in editors like Photoshop—specifically, the background-blend-mode property. If you’re interested in learning all about blending in CSS, you can read more about it here.

I hope you found this article useful. Thank you for reading.

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • Gibran Malheiros says:

    nice article, I didn’t know it was possible to position relative to any edge. that’s awesome!

  • Robert Heuser says:

    Excellent article. Thanks for writing it. Now I have a great reference for background positioning. I never really understood how the background positioning worked until now.

  • Charles Hall says:

    First, this is really well (and thoroughly) written, and very helpful. I would love to see a follow up on background-size and background-attachment along with where and why we still need vendor prefixing.

    Second, I found an error.
    The CSS in the first figure caption under “How Absolute Position Values Work” is actually backward with the image: http://blogs.adobe.com/dreamweaver/files/2015/03/absolute-position-illustration-700×367.png

    background-position: 50px 30px; should be
    background-position: 30px 50px; listing the horizontal offset first.

    • Sara Soueidan says:

      Hey Charles,

      thank you for your comment! A follow up article touching on other background properties has crossed my mind and someone asking for it is a great push to do it.

      Regarding the graph, it’s actually 50px 30px, not the reverse. I think the arrows might have caused the confusion but those only show the translation of the top left corner and do not correspond to the values per se. If you have a second look and translate the image 50px to the right and 30px to the bottom you’ll end up with the result shown in the image. But thank you very much for the note anyway.

      Cheers!
      –Sara

      • Charles Hall says:

        I see. In the illustration, it looked like the value corresponded to the line (and its length) and not its position on the axis. All clear.

  • Christian Varga says:

    Very handy tips about offsetting relative to any edge. I didn’t know you could do things like `right 10px`, which would have been quite useful in many of my past projects. Now I know :).

  • > When you give an element a background—be it an image or a solid color—that background is painted across the element’s *padding* area by default.

    Isn’t it a typo? Shouldn’t it be ‘element’s *border* area’, as described in section 14.2 of CSS2.1 and by the initial value of ‘background-clip’ property?

  • Nice writeup. Didn’t know about the 4 value syntax, which isn’t even documented on MDN I guess.

  • Really nice article, well written! In particular, I like that the order in which the properties are presented is considered. Two things that are unclear though:
    1) Section “How Absolute Position Values Work” begins with “When you specify a position in absolute units”. Is this section really specific to units that are absolute (e.g. px)? I ask because that section deals with ems (a relative unit) as well. I suspect that the section covers “How Non-Percentage Position Values Work” (including both absolute and relative units).
    2) I’ve read (elsewhere) that the background-origin property also has some impact on how the background image is scaled. Perhaps scaling will be dealt with in a follow-up article? After all, there are two areas that need to be dealt with: 1) the area of the source (i.e. background image) as well as 2) the area of the target (i.e. the area in which that (portion of the) background image will be painted.
    Thanks again for a really nice well-written article!

Share your thoughts

Your email address will not be published. Required fields are marked *

*