CSS background-origin

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

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c {border: 12px dotted maroon; padding: 22px;
         background-image: url("images/sml-plnt-lf.jpg");
         background-repeat: no-repeat; margin-bottom: 20px;}

      #a {background-origin: border-box;}
      #b {background-origin: padding-box;}
      #c {background-origin: content-box;}
   </style>
</head>
<body>
   
   <div id="a">
      <h2>background-origin: border-box</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>

   <div id="b">
      <h2>background-origin: padding-box</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</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>

   <div id="c">
      <h2>background-origin: content-box</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit.</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>
      <p>Lorem ipsum dolor sit amet consectetur.</p>
   </div>
   
</body>
</html>
Output

background-origin: border-box

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.

background-origin: padding-box

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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.

background-origin: content-box

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit.

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.

Lorem ipsum dolor sit amet consectetur.

CSS background-origin Syntax

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

background-origin: x;

The value of x should be any of the following:

  • border-box - used to set the origin position of background-image to upper left border corner
  • padding-box - used to set the origin position of background-image to the upper left padding corner. This is the default value.
  • content-box - used to set the origin position of background-image to upper left content corner
  • initial - used to use the default value
  • inherit - used to use the value inherited by parent element

CSS Online Test


« Previous Tutorial Next Tutorial »