Do browsers request images that have been overwritten in CSS?

Question

Let's say I have CSS that looks like this:

#element {background-image: url("image1.png");}
#element {background-image: url("image2.png");}

Will the browser:

• Request image1.png, then request image2.png and display it? Or...
• Parse the CSS first, see that the selector specifying image2.png takes priority, and only request and display image2.png?

Answer 1

From some quick testing with Chrome and the Developer Tools:

• If #element does not exist then neither image is downloaded, since the browser has no matching element to apply the style to
• If #element exists the usual CSS cascading and specificity rules apply and only image2.png will be downloaded since that rule appears after the image1.png rule.

That said, other browsers may behave differently.