Search code examples
cssretina-display

Are background images wrapped in media queries loaded after the default background image?

I want to add a background that will render progressively on high res devices

Will the smaller (non-retina / high-res) image load before the high res - when the smaller image is the default background (before the media query)?

.element
   background-image: url(image-1x.png)
   background-size: cover

  @media (-webkit-min-device-pixel-ratio: 2)
     background-image: url(image-2x.png)

A reference to CSS specifications for this is most appreciated.

Solution

  • You want to know how CSS Cascade works.
    MDN article here
    Spec here

    In your particular case, I'd suggest to replace @media with -webkit-image-set:

    .element {    
    background-image: url(image-1x.png); 
    background-image: -webkit-image-set(
                         url(image-1x.png) 1x,
                         url(image-2x.png) 2x
                      );
    background-size: cover;
}