Question

If I have a button like this one:

a#settingsCloseButton {
        background: url("img/my_account_sprite.png") no-repeat scroll 0 -155px transparent;
        display: block;
        height: 14px;
        text-indent: -3000px;
        width: 14px;
    }

I use to write the :hover and :active like this:

a#settingsCloseButton:hover {
        background: url("img/my_account_sprite.png") no-repeat scroll -14px -155px transparent;
    }

a#settingsCloseButton:active {
        background: url("img/my_account_sprite.png") no-repeat scroll -28px -155px transparent;
    }

My Question is: If I will write it only with background-poistion like this would it get me better loading performence:

a#settingsCloseButton:hover {
        background-posiiton: -14px -155px;
    }

a#settingsCloseButton:active {
        background-posiiton: -28px -155px;

    }

It is easier for to duplicate the whole background properties because then I can tell where the image is being taken from (like the first example). but does it means it re-loads it? Is one option loads faster then the other or they are both the same?

thanks,
Alon

Answer 1

There is no performance penalty incurred in the form of extra loads or anything like that. Once a browser has loaded an image the first time, it has the image in memory and doesn’t need to load it again every time it’s referenced in a stylesheet.

Setting just the background-position property simply makes it clear that all that’s really changing is the background position. It’s not necessary to repeat the rest of the values (image, repeat, attachment) if they’re not going to change in the :hover and :active states.