How to include the background-cover value in the shorthand background property?

I am trying to set a background-image to stretch to the full extent of a <div>'s width and height. The <div> will be of variable size, so I am using background-size: cover;

background: url("../images/bkgnd-sidebar.png") no-repeat left top cover;

I cannot figure out how to place it in this shorthand notation and have it work. If I list each property independently, it works fine, but I was hoping for an all-in-one solution.

This works, but is not preferred:

background-size:cover;
background-image:url('../images/bkgnd-sidebar.png');

According to the W3 and MDN, there needs to be a slash separating the backgound-size from the background-position:

W3C example:

p { background: url("chess.png") 40% / 10em gray  round fixed border-box; } 

MDN:

This property must be specified after background-position, separated with the '/' character.

Opera also has some information on the background shorthand:

http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html


Good question this is from W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference

So if you want to include the background-size value in the shorthand syntax, you need to:

  • Explicitly include background-position values even if these are the same as the defaults Write background-position values before background-size values. Put a slash in between these two pairs of values.

So you would want to do something like this

background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left / cover no-repeat;

See fiddle here

http://jsfiddle.net/8Up6V/


Here is an example using the asker's parameters that will work. Some of the other answers have overcomplicated the parameters a bit. All that needs done is the background-size needs to be separated from the background-position by a forward slash /:

 background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;