CSS background shorthand property not working with background-size

Question

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.

Answer 1

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;

Answer 2

background-size should not be included in background because it is not recognized by browsers.