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:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!