Overriding CSS background image styles - both images are loaded?

Question

If I have 2 CSS styles that assign background images to an element, and one style overrides the other. Will both images be downloaded by the browser or just the overriding one?

I reason I'm asking is I recently attended a workshop on conditional stylesheets for mobile devices. If I override my normal bg images with smaller ones to save bandwidth, will the larger images be loaded anyway? This seemed to be what the guy was saying but it seems strange to me it would work this way.

Answer 1

It seems in some cases the answer is yes:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

Answer 2

The overridden image will not be loaded.

Just to be clear, for example: http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div>

div {
    background: url(http://dummyimage.com/600x400/000/fff)
}
#test {
    background: url(http://dummyimage.com/200);
    width: 200px;
    height: 200px
}

Only http://dummyimage.com/200 will be loaded.

This is true in at least Chrome, Safari, Firefox, IE8/9, Opera.

I'd guess it's true in all browsers, because it's a simple and effective optimization.