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;