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

css background-image
techtheatre picture techtheatre · Jun 13, 2013 · Viewed 28.6k times · Source

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');

Answer

j08691 picture j08691 · Jun 13, 2013

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

Related questions

How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: background-image: url("whatever.jpg"); I want to apply a CSS 3 …

Read More
CSS Display an Image Resized and Cropped

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I …

Read More
How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More