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 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.