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.
Quick 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;
}Quick facts
Initial value
padding-boxInherited
No
Applies to
all elements
Animation type
repeatableList
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.
Safe to use without fallbacks.
1+
4+
3+
12+