5
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?

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
hanktard
  • 71
  • 2
  • 1
    I can confirm Chrome does not download the image: http://fiddle.jshell.net/TGWhJ/1/show/. – Blender Dec 05 '11 at 17:14
  • 1
    I don't know of a definitive list, but take a look at http://stackoverflow.com/questions/2104312/do-all-css-background-images-get-loaded-even-if-the-css-isnt-applied. Seems like you can just watch each browser's behavior with a debugging proxy to find out for sure. – JD Smith Dec 05 '11 at 20:05
  • you could start testing. chrome and opera have built in debuggers where you can check the resources downloaded. firefox has firebug and IE has "F12" – Joseph Dec 29 '11 at 09:32

1 Answers1

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.

John Fish
  • 1,060
  • 1
  • 7
  • 13
  • seems like IE7 for example downloads the PNG and ignores the vendor prefixed lines. So I don't see the problem doing this except for that some crappy browsers might download the PNG and then override it with the gradient. Which makes for extra load time. – hanktard Dec 07 '11 at 12:19