How to include the background-cover value in the shorthand background property?
CssBackground ImageCss Problem Overview
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');
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
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
Solution 3 - Css
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;
Solution 4 - Css
The syntax of (multiple) background shorthand is:
> background: [ <bg-layer> , ]* <final-bg-layer>
>
> Where
>
> <bg-layer> = <bg-image> || <position> [ /
> <bg-size> ]? || <repeat-style> || <attachment> ||
> <box> || <box>
>
> <final-bg-layer> = <bg-image> || <position> [ /
> <bg-size> ]? || <repeat-style> || <attachment> ||
> <box> || <box> || <'background-color'>
>
> ... If one <box> value is present then it sets both
> ‘background-origin’ and ‘background-clip’ to that value. If two values
> are present, then the first sets ‘background-origin’ and the second
> ‘background-clip’.
>
> - A double bar (||) separates two or more options: one or more of them must occur, in any order.
> - An asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.
> - A question mark (?) indicates that the preceding type, word, or group is optional.
So the in order to include background-size
, you must specify the background-position
before it and place a /
in-between.
Assuming that you want to crop the image from the center instead of top-left you would write:
background: url(...) center / cover;
All four examples below use the same image:
h1 {
font: medium monospace;
}
.test {
display: inline-block;
}
.test-landscape {
width: 200px;
height: 150px;
}
.test-portrait {
width: 150px;
height: 200px;
}
.test-lefttop {
background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) left top / cover;
}
.test-center {
background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) center / cover;
}
<h1>background-position: left top<h1>
<div class="test test-landscape test-lefttop"></div>
<div class="test test-portrait test-lefttop"></div>
<h1>background-position: center</h1>
<div class="test test-landscape test-center"></div>
<div class="test test-portrait test-center"></div>