background overwrites background-size

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

background resets the image-position after you set size.

The reason why is that the ‘background’ property is a shorthand property for setting most background properties at the same place in the style sheet. Including, background-size, which is the one you tried to use before.

Edited new CSS specification link: https://www.w3.org/TR/css-backgrounds-3/#background

You use

background-size: 60px 60px;

background: transparent url("icon.png") no-repeat 0 0;

Which translates to:

background-size: 60px 60px;  /*You try to set bg-size*/

background-color: transparent ;
background-position: 0% 0%;
background-size: auto auto; /* it resets here */
background-repeat: no-repeat no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: url("icon.png"); 

So you can try using the seperate background-... settings

So either use:

background-size: 100% 100%;
background-image: url("http://1.bp.blogspot.com/-T3EviK7nK1s/TzEq90xiJCI/AAAAAAAABCg/OMZsUBxuMf0/s400/smilelaughuy0.png");
background-repeat:no-repeat;
background-position:0 0;

http://jsfiddle.net/K74sw/9/

Or just swap your lines.

http://jsfiddle.net/K74sw/10/