CSS background-position Property

The background-position property determines the initial position for each background image of an element, relative to the background position value of the corresponding image defined by background-origin.

The initial value of background-position property is 0% 0%. You can apply it to all elements. It also applies to ::first-letter and ::first-line. The property is not inheritable. It is animatable as a length or percentage value.

Syntax

This is the formal syntax for using background-position property —

background-position: <position>

Here are some examples of using this property —

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;  

/* <percentage> values */
background-position: 25% 50%;  

/* <length> values */
background-position: 0 0;
background-position: 1em 1.5em;

/* Multiple values */
background-position: 0 0, center;  

Acceptable Values

<position>

This value specifies the position of an element inside the background positioning area. The position can be defined by using offset keywords (top, left, bottom, right, and center), or <percentage> and <length> offset values.

The keywords are easy. Specifying top will align the background image to top of its container. Similarly, specifying right will align the image to the right of the container.

In the same manner, lengths are easy too. You just specify that exact amount of horizontal or vertical distance between the top-left corner of the image and the elmement. For example, background-position: 50px 80px will position the left edge of image at a distance of 50px from the left edge of the container and the top edge of image at a distance of 80px from the top edge of the container.

Percentages are slightly tricky. Percentages refer to the size of the background positioning area minus size of background image. Here, size refers to the width for horizontal offsets and to the height for vertical offsets. For example, let's say the container is 400px wide and 300px high.Let's say, the image is 200px wide and 100px high. If you positioned this image in the given container using background-position: 20% 80%, the left edge of the image will be at a distance of (400 - 200)*20/100 = 40px from the left edge of the container. Similarly, the top edge of the image will be at a distance of (300 - 100)*80/100 = 160px from the top edge of the container.

The background position can also be set outside of the element’s box.

Examples

In the following example, I applied a background image to three different elements. You can see how the behavior and location of the background image has changed in all three cases. In the third case, the image is fixed to the viewport and it won't move with the element. To know in more detail about these properties and the values they can take, you can read the corresponding article.

See the Pen CSS background-position Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The background-position property is supported in all major browsers like Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top