Background-origin

The background-origin property is CSS3 new feature. The background-origin property defines the background positioning area which is the position of an image which is placed by using the background-image property.

Note that if the background-attachment is fixed, background-origin property will be ignored.

CSS Syntax

background-origin: border-box | padding-box | content-box |initial | inherit;

Let's see an example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border-box {
        width: 230px;
        height: 80px;
        padding: 20px;
        margin-bottom: 10px;
        border: 10px double #1c87c9;
        background-image: url("/uploads/media/default/0001/01/5e807bbba61860b7ced4ab522ce11f5e6513d8c6.jpeg");
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-background-origin: border-box; /* Safari and Chrome */
        -moz-background-origin: border-box; /* Firefox */
        -ms-background-origin: border-box; /* Internet Explorer */
        -o-background-origin: border-box; /* Opera */
        background-origin: border-box;
      }
      .padding-box {
        width: 230px;
        height: 80px;
        padding: 20px;
        margin-bottom: 10px;
        border: 10px double #1c87c9;
        background-image: url("/uploads/media/default/0001/01/5e807bbba61860b7ced4ab522ce11f5e6513d8c6.jpeg");
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-background-origin: padding-box;
        -moz-background-origin: padding-box;
        -ms-background-origin: padding-box;
        -o-background-origin: padding-box;
        background-origin: padding-box;
      }
      .content-box {
        width: 230px;
        height: 80px;
        padding: 20px;
        margin-bottom: 10px;
        border: 10px double #1c87c9;
        background-image: url("/uploads/media/default/0001/01/5e807bbba61860b7ced4ab522ce11f5e6513d8c6.jpeg");
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-background-origin: content-box;
        -moz-background-origin: content-box;
        -ms-background-origin: content-box;
        -o-background-origin: content-box;
        background-origin: content-box;
      }
    </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>

Property Values

Value Descriptions
border-box It places background image to outside edge of the border.
padding-box It places background image to the padding box. It is default value.
content-box It places background image to the content box.
initial It sets the property to its default value.
inherit It inherits the property from its parents element.




Related articles