Overriding CSS background image styles - both images are loaded?

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 i开发者_高级运维t seems strange to me it would work this way.

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

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.

The answer is NO. The first one was overridden won't load the background property. Why? Because browsers load your css file first before loading any other resources. They handle css files first then start loading images based on order and overriding order.

For example:

div {
    border: solid 1px #000000;
    background: url('images/sprites.png') no-repeat x y;
}

.mobile div {
    border: solid 1px #000000;
    background: url('images/sprites_mobile.png') no-repeat x y;
}

Browsers will process this css for your mobile to become like this:

div {
    border: solid 1px #000000;
    background: url('images/sprites_mobile.png') no-repeat x y;
}

And now, browsers already ignored the sprites_mobile.png for loading.

Can you not do an experiment and view the web log files to see what is happening?

Otherwise why not have a little PHP to select the appropriate style sheets depending on the device.