Whether you’re building your site from scratch or using a framework like Bootstrap 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.

Free Intro Guide to HTML & CSS [Download Now]

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:

 

 

   #idexample {

  background-position: right 10px bottom 20px;

}

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:

 

 

   #idexample {

  background-position: right 30px bottom;

}

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 the W3Schools Online Code Editor 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 W3Schools.com 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.”

Here’s the HTML:

 

 

   <body id="length">

<h1>CSS Background Position Property</h1>

<p>The backgroud image will be positioned 10 pixels to the right and 50% down the page. This percentage is how the browser interprets the "missing" second length value.</p>

</body>

Here’s the CSS:

 

 

   #length {

  background-image: url("/images/logo.png");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: 10px;

}

Here’s the result:

CSS background position property defined by length values in pixels

Source

Percentages Example

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

Here’s the HTML:

 

 

   <body class="snug">

<h1>CSS Background Position Property</h1>

<p>The spot on the background image that is 70% from the left and 35% from the top is placed at the spot of the container that is 70% from the container's left and 35% from the container's top.</p>

</body>

Here’s the CSS:

 

 

   .snug {

  background-image: url("/images/logo.png");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: 70% 35%;

}

Here’s the result:

CSS background position property defined by percentage values

Source

Keywords Example

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

Here’s the HTML:

 

 

   <body>

<h1>CSS Background Position Property</h1>

<p>The background image will be positioned bottom right.</p>

</body>

Here’s the CSS:

 

 

   body {

  background-image: url("/images/logo.png");

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: bottom right;

}

 

Here’s the result:

 

CSS background position property defined by keyword values

Source

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.”

Here’s the HTML:

 

 

   <body title="example">

<h1>CSS Background Position Property</h1>

<p>In this example, the first keyword valye"top 10%" defines Y and the other keyword value "right 5%" defines X.</p>

</body>

Here’s the CSS:

 

 

   [title=example] {

  background: url("/images/logo.png")no-repeat fixed top 10% right 5%;

}

Here’s the result:

CSS background position property defined with four-value syntax

Source

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.

New Call-to-action

 css introduction

Originally published May 27, 2020 7:00:00 AM, updated May 27 2020

Topics:

Bootstrap CSS