How to Include the Background-Cover Value in the Shorthand Background Property

How to include the background-cover value in the shorthand background property?

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

Can I insert background-size: cover into the background shorthand?

I don't think you can include background-size in the shorthand but there should be no issue with including it after the shorthand statement.

EDIT: This answer confirms that you can.

background: no-repeat 50% 50% etc;
background-size: cover;

The shorthand statement overrides all background statements, even ones that haven't been included (or can't be included) in the shorthand statement.

background-size in shorthand background property (CSS3)

1. Your jsfiddle uses background-image instead of background
2. It seems to be a case of "not supported by this browser yet".

This works in Opera : http://jsfiddle.net/ZNsbU/5/

But it doesn't work in FF5 nor IE8. (yay for outdated browsers :D )

Code :

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

You could do it like this :

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

Which works in FF5 and Opera but not in IE8.

Issues with background-position in background shorthand property

As stated in the documentation of the background property, background-size cannot be set alone and it should be used with background-position. Also inherit and initial aren't valid values for those properties.

CSS background shorthand property not working with background-size

The background shorthand requires that you also set background-position in order to set background-size. You can find the grammar for the background shorthand in the spec, but in a nutshell the syntax for the two properties is

<bg-position> [ / <bg-size> ]

which means "background-position, optionally followed by a forward slash then background-size" (the usual optional-whitespace rules apply)

If you do not need to change background-position to a different value, the initial value is 0 0 (zero on both axes):

background: url("img/background.jpg") 0 0 / cover no-repeat;

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

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

---

Related Topics