CSS background shorthand property not working with background-size

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


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;

If in longhand you're using a single value keyword (top, left, etc.) and letting the unwritten one default to center it won't work in shorthand. You need to specify both keyword values.

background: url("image.jpg");
background-position: left;
background-size: cover;

In shorthand you will have to specify both values..

background: url("image.jpg") left center / cover;

Or both center..

background: url("image.jpg");
background-position: center;
background-size: cover;

background: url("image.jpg") center center / cover;

Tags:

Css