background-origin
Sets the starting point for where a background image is positioned. Unlike 'background-clip' which hides parts of the background, 'background-origin' actually shifts the starting (0,0) coordinate of the image.
It is documented as part of the CSS Backgrounds and Borders specification.
Syntax
/* Usage Example */
.box {
border: 10px dashed #ccc;
padding: 20px;
background-image: url(';logo.png');
background-repeat: no-repeat;
/* Image starts at the edge of the content, ignoring the padding */
background-origin: content-box;
}
/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;background-origin Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
1+
4+
3+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more