This works:
background: none center no-repeat
background-size: contain
This does not work:
background: none center contain no-repeat
According to MDN, the background shorthand property should be able to set the background-size as well as the other properties, but when I use it in this way (or with "contain" at other positions within the descriptor), Chrome ignores the entire background setting, and Dev Tools says "Invalid property value".
The workaround of simply putting the background-size as a separate property works, but it seems odd. What’s the recommended way to define all these attributes?
(My actual code has a background image URL, but the phenomenon exhibits just as much with "none".)
The formal grammar is extremely detailed, but I believe that my syntax is correct.
>Solution :
From MDN:
The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".