...

View Full Version : [CSS]Any difference between background: url() and background-position in sprites?



hernantz
12-18-2010, 09:34 PM
Hi all,

Well just that, Is it the same to do this (just an example)

.option1 { background:url(foo.png) 0 0 no-repeat;
.option2 { background:url(foo.png) 0 -30px no-repeat;
.option3 { background:url(foo.png) 0 -60px no-repeat;

and this? (just an example too)

.option-container { background:url(foo.png) no-repeat;}
.option1 { background-position: 0 0 no-repeat;}
.option2 { background-position: 0 -30px no-repeat;}
.option3 { background-position: 0 -60px no-repeat;}

The question is oriented to the best solution for performance. Are there any significant differences?

Thanks in advance

NoeG
12-18-2010, 09:40 PM
sprites are seamless rollovers

Excavator
12-18-2010, 10:00 PM
Hello hernantz,
They both load and position foo.png for each option. I would prefer the first example because it's more condensed than the second.

hernantz
12-19-2010, 06:22 PM
it's good to know, thanks :thumbsup:

Apostropartheid
12-20-2010, 02:47 AM
I would just condense it as so:


#options div { background: url(foo.png) no-repeat; }
.option1 { background: 0 0;}
.option2 { background: 0 -30px;}
.option3 { background: 0 -60px;}

with


<div id="options">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3"></div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum