background-position

Published Jun 25, 2021Updated Dec 19, 2023
Contribute to Docs

Defines the positions of one or more background images relative to the background-origin position. This is the point from which any background repetition will occur.

Syntax

background-position: <value>;

Where value can be one of the following:

  • Position keyword: left, right, left top, bottom, bottom center
  • X% Y%: 25% 75%, 50%, 50%
  • Length value: 25px 25px, 4em 2em

Note: The default position will be in the top-left corner.

Example 1

Set background image position to the top right corner of .hero class element:

.hero {
background-image: url('avatar.png');
background-repeat: no-repeat;
background-position: top right;
}

The following is the result of the code block above:

Background image on top right of the browser

Example 2

Use percentages to place background image in the middle of the element:

.hero {
background-image: url('forrest.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}

The following is the result of the code block above:

Background image in the middle

Example 3

Use pixels to place background image 100px down the y-axis and 100px along the x-axis:

.hero {
background-image: url('forrest.png');
background-repeat: no-repeat;
background-position: 100px 100px;
}

The following is the result of the code block above:

Background image 100px down and 100px right

Example 4

Position multiple images:

.hero {
background-image: url('squirrel'), url('forrest.png');
background-repeat: no-repeat;
background-position: top left, bottom right;
}

The following is the result of the code block above:

Two background images in different positions

All contributors

Looking to contribute?

Learn CSS on Codecademy