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
The content box is the area created by the element’s content, excluding any padding and border.
There’s also a fourth area called the margin box which includes the element and its outer margin that you specify using the
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.)
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 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,
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.
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
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
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
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).
In addition to percentage and absolute offset values, five offset keywords exist and can be used:
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
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.
The absolute position can also be negative, in which case the image will be offset in the opposite direction from the edge.
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!
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.
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.
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.
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.