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 o

Answer 1

The overridden image will not be loaded.

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

test

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.