I can't add a CSS "background-size" value to "background" property's value

background, css

Solution

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

Problem

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.

Original source

Related problems