Background-Size in Shorthand Background Property (Css3)

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.

Can you declare the background-size in shorthand for the background:

Yes. The full CSS3 syntax is:

background: color position/size repeat origin clip attachment image|initial|inherit;

Note: If one of the properties in the shorthand declaration is the background-size property, you must use a / (slash) to separate it from the background-postion property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

how to use background-size : contain in shorthand property with background with url.?

background: #00ff00 url("smiley.gif") no-repeat fixed center / contain; 

this should work.

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.

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

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;

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.

CSS background shorthand, can't include size

From MDN:

The value may only be included immediately after ,
separated with the '/' character, like this: "center/80%".

To clarify: The solution is to write background: none center/contain no-repeat, instead of separating them with spaces.

Why does css background-size/position not work with shorthand background url?

You have to use background-image instead of the shorthand background property. Shorthand background resets background-size and background-position to their default values, which is why the first rule ends up not doing anything.

Moving the shared CSS last in the file would also make it work by having last say, although of course this is not a real solution.

---

Related Topics