CSS background-position

The background-position property in CSS specifies the starting position of a background image. It allows precise placement of background images, enhancing the design and layout of web elements.

Syntax of background-position

</>
Copy
background-position: value;

Values

ValueDescription
left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottomPosition the background image using keywords. If one keyword is specified, the other will default to center.
x% y%Specifies the horizontal and vertical position in percentages. The top left corner is 0% 0%, and the bottom right corner is 100% 100%. If one value is specified, the other defaults to 50%.
xpos yposSpecifies the horizontal and vertical position in CSS units (e.g., px, em). The top left corner is 0 0. You can mix percentages and positions.
initialSets the property to its default value (0% 0%).
inheritInherits the value from the parent element.

Default Value

0% 0%

Examples for background-position

Using the CSS background-position Property

The following examples demonstrate how to use the background-position property with various values.

</>
Copy
/* Position background at the top-left corner */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-position: left top;
}

/* Position background at 50% horizontally and 75% vertically */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-position: 50% 75%;
}

/* Position background 20px from the left and 10px from the top */
.element {
  background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
  background-position: 20px 10px;
}

Example for Centered Background

Below is an example demonstrating how to center a background image using background-position: center center:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/lion.jpg');
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="box">Centered Background</div>

</body>
</html>

Example for Background Position with Percentages

background-position: 0% 0%;

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/lion.jpg');
    background-position: 0% 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="box">Background at 0% 0%</div>

</body>
</html>

Example for Background Position with Values

background-position: 2em 3em;

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    border: 2px solid black;
    background-image: url('https://www.tutorialkart.com/img/lion.jpg');
    background-position: 2em 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 18px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="box">Background at 2em 3em</div>

</body>
</html>

Browser Support

The background-position property is supported in all modern browsers. Below is a compatibility table:

BrowserVersion
Chrome1.0
Edge4.0
Firefox1.0
Safari1.0
Opera3.5