Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'); 
like image 990
techtheatre Avatar asked Jun 13 '13 17:06

techtheatre


People also ask

Which of the following is the shorthand property for CSS background properties?

The CSS background shorthand property is used to define a background for an element. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.

Which property is used to shorthand property?

CSS Border - Shorthand Property The border property is a shorthand property for the following individual border properties: border-width.


1 Answers

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

like image 114
j08691 Avatar answered Sep 28 '22 23:09

j08691