background overwrites background-size

Issue

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

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6lt7FJe8nKLfmxH5vAJZy2kIkiKvOTmUsu0dSW3w_01EBA-5Lgh8-7AOwzoJ5ypKdM914Rw1_GCBt_WlHLpvyMyFl5SbW8iyQvnNTTm8u1FJ9PWIAT2_3Yp3o1nkTrwfwmfc-vwZ21k/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/

Answered By - Timmetje