CSS background shorthand property not working with background-size
css
Solution
The `background` shorthand requires that you also set `background-position` in order to set `background-size`. You can find the grammar for the `background` shorthand in the spec, but in a nutshell the syntax for the two properties is
<bg-position> [ / <bg-size> ]
which means "`background-position`, optionally followed by a forward slash then `background-size`" (the usual optional-whitespace rules apply)
If you do not need to change `background-position` to a different value, the initial value is `0 0` (zero on both axes):
background: url("img/background.jpg") 0 0 / cover no-repeat;
Problem
When I try to combine several lines of CSS into one when styling a background image like so: ``` background: url("img/background.jpg") cover no-repeat; ``` It doesn't work; however, when I move the cover and no-repeat onto their own lines ``` background: url("img/background.jpg"); background-size: cover; background-repeat: no-repeat; ``` The image works just fine. Any hints or ideas on what's going wrong? I often notice this problem with things like padding and margins as well.