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>