CSS - background-origin Property

The background-origin CSS property is used to set the origin of the background, which could be from the start of the border, inside the border or inside the padding.

Note: When background-attachment is set to fixed, the background-origin is ignored.

The property background-origin is similar to the property background-clip, except it resizes the background rather than clipping it.

Possible Values

  • border-box: Background is positioned relative to the border box.

  • padding-box: Background is positioned relative to the padding box

  • content-box: Background is positioned relative to the content box

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundOrigin = "border-box | padding-box | content-box"

CSS background-origin Example

The following example demonstrates how to use different background-origin values (border-box, padding-box, content-box) to set the origin of the background −

<html>
<head>
<style>  
   div {
      border: 10px rgb(13, 7, 190);
      border-style: dashed;
      margin: 5px;
      padding: 1cm;
      font: 700 1em sans-serif;
      color: aliceblue;
      display: inline-block;
      background-image: url('images/yellow-flower.jpg');
      height: 200px;
      width: 200px;
   }
   .border-box {
      background-origin: border-box;
   }
   .padding-box {
      background-origin: padding-box;
   }
   .content-box {
      background-origin: content-box;
      background-repeat: no-repeat;
   }
</style>
</head>
<body>
   <div class="border-box">background origin border-box</div>
   <div class="padding-box">background origin padding-box</div>
   <div class="content-box">background origin content-box</div>
</body>
</html>

CSS background-origin - With Multiple Values

The following example demonstrates how to set multiple background origin using background-origin property −

<html>
<head>
<style>  
   div {
      border: 10px rgb(13, 7, 190);
      border-style: dashed;
      padding: 1cm;
      font: 700 1em sans-serif;
      color: black;
      display: inline-block;
      background: url('images/white-flower.jpg'), url('images/tree.jpg');
      background-origin: content-box, padding-box;
      background-repeat: no-repeat;
      height: 300px;
      width: 300px;
   }
</style>
</head>
<body>
   <div>
      <p>background-origin: content-box and border-box</p>
   </div>
</body>
</html>
Advertisements