Geek Answers Handbook

Background overwrites background size

I already know the solution to my problem, but I wonder why this is happening. Why does background overwrite background size? Please do not write about cross-viewing.

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/

Decision

Insert background-size instructions below background

+7
source share
2 answers

background resets the image position after setting the size.

The reason is that the background property is a shorthand property for setting most background properties in one place in the stylesheet. Also the background-size that you tried to use before.

You are using

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

Which means:

 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 separate 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/

+12
source

background is a “CSS verbatim property” for simply combining several related background properties into a single declaration ( background-color , background-image , background-repeat , background-position , etc.).

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

To fix this:

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

2) put the declaration of the background-size property in a more specific selector a.icon , not .icon

3) do not use background shorthand at all, but instead use separate properties to indicate

+7
source

More articles:


All Articles