Is the browser caching CSS background images?

Question

When I have the same image used for different elements (sprite images) I usually don't call that image again as this is a new HTTP request.

I rather use:

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

Is this saving HTTP requests?

Or if the browser is smart and I can use:

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

Is the browser going to make a new HTTP request? Or it knows that I already have this image cached?

The question is: Do i gain something by using example 1?

Answer 1

In the scenario you describe, the browser will essentially reference the same image several times on one page, and this will almost certainly be cached.

Across different pages, the answer depends on the browser, and on the expiration headers your server sends will impact the caching behavior in conforming agents.

Answer 2

Yes, browsers will load the second reference to the same image in the CSS file from the cache. Using Firebug you will be able to see all the HTTP requests made by the browser.