With multiple background images defined in a CSS class; Do browsers download them all?

Question

body {
   background: url(image.png);
   background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
}

I know the gradient will be shown and the .png overridden if I use Firefox. But will the browser still download the .png? What about other browsers, their vendor prefixes and behavior?

Answer 1

This really depends on what browser you're using. For the most part, up to date browsers, such as chrome, don't download the files until they've read all the CSS statements I believe. Because you stated two background "images", it's not actually going to download the PNG because the statement is overwritten.

However, I would advise against this, because there are still a lot of users out there using old versions of browsers, and I can't guarantee how those browsers will act in this situation.