Is the browser caching CSS background images?

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.开发者_JS百科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?

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.

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.

If you would like to simplify things and cache resources and save bandwidth, then you should make an appcache.appcache file in the root of your website. This link gives a tutorial on making an appcache. It saves on http requests if the user visits your site more than once and saves on requesting the same image twice if it already exists in the cache.

Happy Caching!