How to Set Background Image Position in CSS

In this article, we will learn to set the background image position in html container. The CSS background-position property is used to set the initial position of the background image in the container. It allows you to move the background image vertically and horizontally in the container.

Syntax:

background-position: value;

The CSS background-position have different values for setting the image position. We change the background-position value to move the image location in the container.

Background Position Property Values

The background-position property is specified as one or more position values.

background-position: center; /* Center the image */
background-position: left; /* Left the image */
background-position: top; /* Top the image */
background-position: bottom; /* Bottom the image */
background-position: right; /* right the image */

Example:

If we use this CSS for the background image, then we get the image position as top and center in the container.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position: center top; // Center and top the image
}

If we use percent, the background image will be positioned in the center of the element.

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Example:

body {
  background-image: url('images/lion.jpg');
  background-repeat: no-repeat;
  background-position: 80px 100px;
}

Output: