3

Possible Duplicate:
background-size in shorthand background property (CSS3)

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<style>
    div {
        width: 500px;
        height: 400px;
        background: red url(https://www.google.com/images/logos/google_logo_41.png) 50% 50% cover no-repeat;
    }
</style>
<div></div>​

http://jsfiddle.net/gu9fh

I wanna define a CSS background-size property with value cover. But I don't tend to write a single background-size property. I wanna combine it to the background property. But the background doesn't be displayed.

How can I add a CSS background-size value cover to the background property's value?

Thanks.

0

3 Answers 3

6

Also what hasn't been noted yet is that not all browsers (including Chrome) supports the new CSS3 shorthand for background.

For better support you probably should just use the background-size property separately as most new browsers support it that way.

div {
    width: 500px;
    height: 400px;
    background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat scroll 50% 50%;
    background-size: cover;
}

The code above works in both FireFox and Chrome while the shorthand does not.

For a demo and proper attribute ordering see the link below.

See Dev - Opera - Background Shorthand

3
  • Thanks again for pointing that out. What version of Chrome are you using? The shorthand appears to work fine in Chrome 21 OSX. Aug 20, 2012 at 17:36
  • 2
    But should also point out that the question specifically asked how to implement this with cover applied using the background property alone. I still voted up though Aug 20, 2012 at 17:40
  • Thanks yeah yours and others were correct and upvoted :D Yeah I thought the poster should know before using that its not well supported. I am on Chrome 20 but an update is available haha... the new one probably fixes this but still not supported in FireFox yet... Not sure about other Webkit browsers or Opera though.
    – PJH
    Aug 20, 2012 at 20:13
6

When using the shorthand property, the background-size value must be paired with background-position and separated by a /

Updated: http://jsfiddle.net/5jJfQ/

See the documentation here: http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties7

1
  • Not all browsers support the CSS3 shorthand for backgrounds yet. Your answer does not render in Chrome or FireFox.
    – PJH
    Aug 20, 2012 at 17:25
3

The order of the arguments for background was off. repeat should go before position. Then as jrrdnx noted, size and position should be separated by a /

background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%/cover;

See: http://jsfiddle.net/gu9fh/5/

And a good reference: http://reference.sitepoint.com/css/background

EDIT: As PJH noted, the shorthand for position/size is not yet supported in Firefox or Safari. You simply need to set the background-size on it's own.

background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%;
background-size: cover;

And updated fiddle: http://jsfiddle.net/gu9fh/6/

3
  • This is also correct by standards but will not be supported in a lot of browsers still. Chrome and FireFox cannot render it for starters.
    – PJH
    Aug 20, 2012 at 17:26
  • 1
    This does work in Chrome, but you are correct, not in Firefox or Safari. Updated, thanks Aug 20, 2012 at 17:31
  • Yeah I am on Chrome 20 still and it wasn't working on mine. Still no FireFox though.
    – PJH
    Aug 20, 2012 at 20:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.