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>
