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:

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>
Output

background-position: left top

background-position: left

background-position: left bottom

background-position: right top

background-position: right

background-position: right bottom

background-position: top

background-position: center

background-position: bottom

background-position: 2% 50%

background-position: 2%

background-position: 4px 16px

background-position: 4px

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!