background overwrites background-size

Question

I already know the solution to my problem but I wonder why this is happening. Why background overwrites background-size? Please don't write about cross browsing.

HTML

<div class="icon"></div>

CSS

.icon {
    height: 60px;
    width: 60px;
    background-size: 60px 60px;
    background: transparent url("icon.png") no-repeat 0 0;

}

DEMO

http://jsfiddle.net/K74sw/2/

SOLUTION

Insert background-size instruction below background

Answer 1

background is a CSS "shorthand property" for easily combining several associated background properties into one declaration (background-color, background-image, background-repeat, background-position, etc).

Thus it overwrites any properties not directly specified in the shorthand with their default value (as far as I know... according to the W3C specification you can specify background-size in the background shorthand property after background-position but I have not tested this and I have no idea what browser support for this is at the moment but I suspect it's not great). As I understand it this is because the background shorthand implicitly sets ALL the properties it represents, not just the ones you specify, so any that are not defined in the shorthand declaration are set to their default value.

To fix it either:

1) put the background-size property AFTER the background property

2) put the background-size property declaration in a more specific selector i.e a.icon rather than .icon

3) don't use background shorthand at all but instead use the individual properties to specify