If I use both background-origin: content-box; and background-size: cover; on an element with some padding. The background image still covers the bottom padding (in latest versions of Safari, Chrome, Firefox and IE)
div {
background-image: url('http://lorempixel.com/400/200/');
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
border: 5px red solid;
padding: 20px;
}
Is this the correct behaviour? If so, why (am I missing something obvious here)?
Yes, this is the correct behaviour. background-origin simply shifts the background image. It doesn't modify the background painting area. You need to set background-clip as well, otherwise its value remains as border-box and any part of the image that exceeds the content area due to mismatched aspect ratios will bleed into the padding area:
div {
background-image: url('http://lorempixel.com/400/200/');
background-clip: content-box;
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
border: 5px red solid;
padding: 20px;
}
There's a difference between background-origin and background-clip.
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
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.
As you can see, the background-origin won't clip the image on the bottom edge, it will just make it start (as in placement) where you set its value. However, the background-clip will make it visible or not, will mask it according to the value you set.
More information on MDN:
来源：https://stackoverflow.com/questions/43043878/css-background-combining-content-box-with-cover