Hi there,

I have a quick question regarding how CSS works.

I am using @media to add CSS rules to a responsive website. One page requires quite large background images for desktop (around 1000px x 600px). For smaller devices, I'll need to display smaller images. My question is: does the CSS compile completely before loading images or will it load the first image (the desktop image), and then load the smaller image when it reaches the new rule.

If the CSS complies completely before loading background images, I can do something like this:
#background-image-div{ background: url(../images/large-image.png/) center no-repeat; }

@media only screen and (max-width: 1192px) #background-image-div{ background: url(../images/smaller-image.png) center no-repeat; }
Otherwise its probably better to use a sprite, and adjust the background position for the mobile device.

Thanks in advance for your help.