background-position

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;
}

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%;
}

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;
}

Example 4

Position multiple images:

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

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors