CSS Background Position Property: What It Is & How It Works

When your building a site with HTML and CSS, you’ll have a few standard elements, including images, paragraphs, buttons, and navigation bars.

Once you build these elements in HTML, you can customize them in CSS to better suit your unique layout and branding.

Taking background images, for example. By default, any background images will be placed at the top left of their containers. However, you may want your heading to go in the top left of a container and your image to be in the bottom right. Or you may want an image to take up the entire background of your homepage and overlay text on top of it.

Whatever the reason, you can change the position of your background images using the background position property in CSS.

In this post, we’ll explore this property in depth, defining its syntax and property values and walking through different examples. Let’s get started.

How to Position a Background Image in CSS

In CSS, the background-position property enables you to move a background image within its container. Below we’ll look at its syntax and property values so you can use this property in your own code.

Syntax of CSS Background Position

The syntax of the background position property in CSS is as follows:

{ background-position: value }

There are a number of different values you can use to define this property, which can be grouped into three major categories. Let’s describe each below.

Property Values of CSS Background Position

To specify the background position property in CSS, you can use any of the following:

• Length values
• Percentages
• Keywords

Let’s define each type below.

Length Values

Length values are the simplest way to define the background position in CSS. If using two length values, one value sets the horizontal position of the background image and the other sets the vertical position. In other words, these represent the x and y coordinates of the image.

Remember how the default position of a background image is top left? In terms of length, that default value is 0 0.

Knowing that the first value represents the distance from the left edge of the container and the second value represents the distance from the top edge, setting the background position property to 50px 150px will move the image 50 pixels to the right and 150 pixels down.

In addition to pixels, setting length values in em units is common. Since ems are a relative unit, users can adjust the size of the image in all browsers.

Let’s say only one length value is specified in the CSS. That value specifies the X coordinate relative to the left edge of the container. The second value, which specifies the Y coordinate to the top edge of the container, is assumed to be 50%.

Percentages

Percentages are trickier than length values because they affect the alignment of the image and the container. Defining the property with X% means that the X% mark of the image will be on the X% mark of the container.

Setting the background position to 50% 50%, for example, means the browser will align the middle of the image with the middle of the container. Setting the background position to 100% 100%, on the other hand, means the browser will align the last pixel of the image with the last pixel of the container.

If only one percentage value is specified in the CSS, then the same rule that applies to length values applies. That one percentage value specifies the X coordinate relative to the left edge of the container. The second value, which specifies the Y coordinate to the top edge of the container, is assumed to be 50%.

Keywords

Keywords are simply shorthand for percentages, designed to be easier to remember and write than percentages. Below are the five keywords and their equivalent percentage values.

• top: 0% vertically
• bottom: 100% vertically
• right: 100% horizontally
• left: 0% horizontally
• center: 50% horizontally (unless horizontal is already defined, then this is applied vertically)

Say only one keyword is specified in the CSS. Then a similar rule that applies to other property values applies. The only difference is that the first value does not necessarily specify the X coordinate. That’s because the keywords above are relative to the X- and Y-axis.

So if the keyword specified is top or bottom, then that specifies the Y coordinate relative to the top edge of the container. The second value, which specifies the X coordinate to the left edge of the container, is assumed to be 50%. If the keyword specified is left or right, then that specifies the X coordinate and the second value, which specifies the Y coordinate, is assumed to be 50%.

If you specify two keyword values in CSS, you have to pair the vertical with the horizontal. So if one value is top or bottom, then the other value can’t be top or bottom. In the same way, if one value is left or right, then the other value can’t be left or right.

Below are the only possible combinations for these keywords:

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

If you’re using keywords exclusively, then the order doesn’t matter. “Left top” is the same as “top left,” and so on down the list. However, if you’re using both keywords and percentages or length units, then the order does matter.

Let’s take a closer look at these combinations below.

Three- or Four-value Syntax

In the sections above, we discussed how you can define the background position property with one or two values. You can, in fact, use up to four values. The more values you use, the more exact you can position your image.

Say you want to place a background image 10px from the right and 20px from the bottom of the container. Then you’d use the following four-value background position:

Notice the order of the values is keyword, length unit, keyword, length unit. A background position with more than two values must follow this format, with a keyword preceding a length or percentage unit.

You can also specify the background position property with three values. The browser simply interprets the fourth value as “missing” and gives it the default value of 0. Say you want to place a background image 30px from the right and 0px from the bottom of the container. Then you’d use the following three-value background position:

Let’s take a look at some examples using these different property values below.

Examples of the CSS Background Position Property

In the examples below, you’ll see the background position property combined with other properties defining the background image, color, position, and more. The background-repeat property, for example, sets if a background image will be repeated and how, while the background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

These properties can all be spelled out on their own line, or combined in one line using the background shorthand property. The examples below will show both formats as well as different types of CSS selectors.

These examples were created using Code Pen and have a 636 x 365 container. You can click any of the Source links to see the full code snippet behind the example and try your own.

Length Values Example

The example below uses the length value “10px” to position the HubSpot sprocket logo. The assumed second value is therefore 50%. Notice that it also uses an ID selector to target the <body> element with the ID name “length.”

Percentages Example

The example below uses the percentage values “70% 35%” to position the HubSpot logo. Notice that it also uses a class selector to target the <body> element with the class name “snug.”

Keywords Example

The example below uses the keyword values “bottom right” to position the HubSpot logo. Notice that it also uses a type selector to target the <body> element.

Four-value Syntax Example

The example below uses keyword and percentage values to position the W3Schools.com logo. Notice that it also uses the background shorthand property and an attribute selector to target the <body> element with the title attribute "example.”

Defining the Position of the Background Image

In CSS, you can control the position of each background image on a page with the background position property. This can help you create unique layouts for your site. You’ll just need some basic knowledge of HTML and CSS to do so.