So let's say you had something like this in the main, general part of your stylesheet:
#logo { background: url(images/logo.png) no-repeat 0 0; } And down in your media queries: @media screen and (max-width: 520px) { #logo { background: url(images/logo-small.png) no-repeat 0 0; } } The difference is simply that the media query rule is loading a smaller image. So in the interest of conserving bandwidth and speeding up page-load on mobile, I was wondering if this css would cause the phone to actually download both images. In other words, would the rule in the media query override the earlier rule before the image was downloaded or after? A little Googling yielded this -- interesting: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ This post says it all depends on the browser -- and that what I have above would work as I want on iOS but Android would download both images. Putting both rules inside media queries would work better as far as just loading one image, but then IE8 would load nothing, not recognizing media queries correct? Maybe there's not graceful solution, but I'm wondering how others tend to handle this? ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/