background-origin

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.
 
Note that background-origin is ignored when background-attachment is fixed.

Syntax

background-origin: border-box
background-origin: padding-box
background-origin: content-box
background-origin: inherit

Values

border-box
The background extends to the outside edge of the border (but underneath the border in z-ordering).
padding-box
No background is drawn below the border (background extends to the outside edge of the padding).
content-box
The background is painted within (clipped to) the content box.

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Tutorials</title>
        <style>
            .example {
                border: 10px double;
                padding: 10px;
                background: url('image.jpg');
                background-position: center left;
                /* The background will be inside the padding */
                background-origin: content-box;
            }
            
            div {
                background-image: url('logo.jpg'), url('mainback.png');
                background-position: top right, 0px 0px;
                background-origin: content-box, padding-box;
            }
        </style>
    </head>
    <body>
        <div class="example">
            background origin demonstration
        </div>
    </body>
</html>