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

Question

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.

Answer 1

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;
}