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

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

sprites are seamless rollovers

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.

it's good to know, thanks :thumbsup:

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>