browser image downloading behaviour

In a question I've seen here, someone asked how to alter the bac开发者_运维知识库kground when the page was refreshed, without using any server side techniques. One answer was to make this the css

.backgr0 { background-image: url('images/somepic.jpg'); }
.backgr1 { background-image: url('images/somepic.jpg'); }
.backgr2 { background-image: url('images/somepic.jpg'); }
.backgr3 { background-image: url('images/somepic.jpg'); }
.backgr4 { background-image: url('images/somepic.jpg'); }

and then have a random class added to the element.

But what I was wondering is, when the browser encounters this css, does it go ahead and download all these images? Because in that case, you're really raising the ammount of HTTP requests.

As always, the best way to know for sure is to test it out.

What you will find is that the browser only loads the file if there is a match for the CSS. (at least this is how Firefox, Chrome, and IE behave)

E.g. if you have this, but no id="foo" element, the browser will not load it.

#foo{
  background-image:url('some.png');
}