Single line (shorthand) background style? - css

Question

I'm following this guide: CSS background Property.
background: color image position/size repeat origin clip attachment initial|inherit;
I have this background CSS:
background-color: grey;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-origin: content-box;
I'm trying to convert it to one line:
background: grey center / contain no-repeat content-box;
I need the background image and grey to be the background of the padding too.
Where am I going wrong?
div{
width: 200px;
height: 400px;
background: grey center / contain no-repeat content-box;
padding: 30px;
}
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>
JSFiddle

Answer 1

I need the background image and grey to be the background of the padding too.
If you need the background-image and grey to be the background of the padding too then you should set background-clip as padding-box instead of content-box. content-box area does not include the padding or the border areas.
div {
width: 200px;
height: 400px;
background: grey center / contain no-repeat padding-box;
padding: 30px;
}
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>
Note that I had mentioned background-clip and not background-origin in the above sentence. It is the background-clip that actually clips the background and not the background-origin. When only one box value is provided, both clip and origin are assumed to have the same value.
As per W3C Spec
If one value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.
Now the image goes to the edge, the image should be padded, and the color should not be, possible with separate rules but not one line.Link
If you mean to say that background-image is required (and must be restricted to content area only) whereas the color gets applied to padding area also as indicated in your question and comment here, the code provided in question will not work as-is.
When you use the shorthand background property to assign a value to the background-clip (like in question), you are giving it only a single value and so the same setting would apply to both the color and the image. This means both image and color will be clipped either to padding-box or content-box as applicable.
div {
width: 200px;
height: 400px;
background: grey center / contain no-repeat content-box;
padding: 30px;
}
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>
You can still achieve what you need by using shorthand property but you have to use either of the following options:
Method 1: Assign both the image and color in the same line like in the below snippet. The shorthand property works here because we are assigning clip values specifically for the color and the image.
div {
width: 200px;
height: 400px;
background: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png) center / contain no-repeat content-box, grey center / contain no-repeat padding-box;
padding: 30px;
}
<div></div>
Method 2: Assign separate values for the background-origin and background-clip properties like in below snippet (pointed out in comment by Karsten Buckstegge also).
This works because of two reasons:
Background colors don't have a size, they fill up the entire area within the scope of the clip. So, color becomes available under padding area also.
Background image's size is set to contain and as per spec this means that the image must be scaled to fit the background positioning area which is nothing but the background-origin as mentioned here. Since background-origin is only content-box and background-repeat is set to no-repeat, the image will not occupy the padding area.
div {
width: 200px;
height: 400px;
background: grey center / contain no-repeat content-box padding-box;
padding: 30px;
}
<div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/5/50/NES_Super_Mario_Bros.png)"></div>
Note that the image must be specified before the color because the one that is specified first becomes the top-most layer. If you add color before image then color will hide the image.

Answer 2

This is a problem with the shorthand.
If you just set one value in the end (in this case 'content-box'), it will set background-origin AND background-clip to that value. Therefor you have to set your background-clip after that to have it correct.
Final code then looks like this:
background: grey center / contain no-repeat content-box border-box;
See W3C background spec on that.