css and image sprites

Question

I got a quick question about sprites in css: Will I send two HTTP Request if I include the same image twice in a css file? For example if I want to load two different buttons from the same icon set image:

.btn-1 {
    background:url('img/icons.png') 0 0;
}

.btn-2 {
    background:url('img/icons.png') 0 -60px;
}

or is there another way to only include the image once?

Answer 1

The browser will cache the image so the 2nd time its fetched from cache.

But what you want to do in a situation like this is to let CSS do its job.
If those buttons are <a> for example.

a {
    background: url('img/icons.png');
}

.btn-1 {
    background-position:0 0;
}

.btn-2 {
    background-position: 0 -60px;
}

Answer 2

Besides that what Ólafur said, you could also rewrite your CSS that the URI reference will only occur once:

.btn-1,
.btn-2 {
    background:url('img/icons.png') 0 0;
}
.btn-2 {
    background-position: 0 -60px;
}