Home/ Questions/Q 8420627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T02:55:22+00:00

Possible Duplicate: background-size in shorthand background property (CSS3) <!DOCTYPE html> <meta charset=utf-8> <title>An HTML5

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0