CSS background-position

The CSS background-position property is used to define the starting position of background-image. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{border: 4px solid chocolate; padding: 22px;
         background-image: url("images/sml-plnt-lf.jpg");
         background-repeat: no-repeat;
         background-position: center;}
   </style>
</head>
<body>
   
   <div id="myd">
      <h2>The background-position Property</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum.</p>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit numquam facere.</p>
      <p>Ipsa quae veniam asperiores recusandae eligendi incidunt ipsum, corporis deleniti.</p>
      <p>Autem tempore eveniet illum deserunt obcaecati veritatis optio inventore sapiente.</p>
   </div>
   
</body>
</html>

Output

The background-position Property

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit numquam facere.

Ipsa quae veniam asperiores recusandae eligendi incidunt ipsum, corporis deleniti.

Autem tempore eveniet illum deserunt obcaecati veritatis optio inventore sapiente.

CSS background-position Syntax

The syntax of background-position property in CSS, is:

background-position: x;

The value of x should be any of the following:

left top - used to position the background-image to left top of the element
left center - used to position the background-image to left center of the element
left bottom - used to position the background-image to left bottom of the element
right top - used to position the background-image to right top of the element
right center - used to position the background-image to right center of the element
right bottom - used to position the background-image to right bottom of the element
center top - used to position the background-image to top center of the element
center center - used to position the background-image to center of the element from both vertically and horizontally
center bottom - used to position the background-image to bottom center of the element
x% y% - used to define the custom position of background-image based on the percentage. The x% refers to the horizontal position, whereas the y% refers to the vertical position. For example: 0% 0% refers to top left corner, whereas 100% 100% refers to right bottom corner.
xpos ypos - used to define the custom position of background-image based on the length units. The xpos refers to the horizontal position, whereas ypos refers to the vertical position. For example: 0px 0px is equal to top left corner.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - The second value becomes center, if we provide only one value like left, right, top, or bottom. For example, background-position: left; is equal to background-position: left center;

Note - While defining custom position, using percentage, if we give only one value, then the other value will be 50%. For example, background-position: 20%; is equal to background-position: 20% 50%;

Note - While defining custom position, using length units, if we give only one value, then the other value will be 50%. For example, background-position: 20px; is equal to background-position: 20px 50%;

Note - The default value is top left, 0% 0% or 0px 0px.

CSS background-position Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k, #l, #m{border: 3px solid chocolate;
         padding: 22px; height: 200px; margin-bottom: 20px;
         background-image: url("images/usml-plnt-lf.jpg");
         background-repeat: no-repeat;}
      #a{background-position: left top;}
      #b{background-position: left;}
      #c{background-position: left bottom;}
      #d{background-position: right top;}
      #e{background-position: right;}
      #f{background-position: right bottom;}
      #g{background-position: top;}
      #h{background-position: center;}
      #i{background-position: bottom;}
      #j{background-position: 2% 50%;}
      #k{background-position: 2%;}
      #l{background-position: 4px 16px;}
      #m{background-position: 4px;}
   </style>
</head>
<body>
   
   <h3>background-position: left top</h3>
   <div id="a"></div>

   <h3>background-position: left</h3>
   <div id="b"></div>

   <h3>background-position: left bottom</h3>
   <div id="c"></div>

   <h3>background-position: right top</h3>
   <div id="d"></div>

   <h3>background-position: right</h3>
   <div id="e"></div>

   <h3>background-position: right bottom</h3>
   <div id="f"></div>

   <h3>background-position: top</h3>
   <div id="g"></div>

   <h3>background-position: center</h3>
   <div id="h"></div>

   <h3>background-position: bottom</h3>
   <div id="i"></div>

   <h3>background-position: 2% 50%</h3>
   <div id="j"></div>

   <h3>background-position: 2%</h3>
   <div id="k"></div>

   <h3>background-position: 4px 16px</h3>
   <div id="l"></div>

   <h3>background-position: 4px</h3>
   <div id="m"></div>
   
</body>
</html>