This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



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.