Responsive CSS background-images

HTML & CSS
1

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.

Mike

2

Hi there, have you heard of retina display images. Take a look at this, http://retinajs.com/

This is all done behind the scenes. I hope this helps your journey.

3

Hi Sega,

Thanks for the very useful link. I’m sure it will come in handy in the future.

For this particular problem though, I need to go the other way round. I need to provide smaller images for tablet/mobile, regardless of whether they have retina displays. I’m really just interested in the way that browsers compile CSS rules, so I can decide the best approach.

Best,
Mike

4

Browsers apply a “last in, first out” approach, in that the last element that matches the specificity will apply. So in your case, the last rule will apply for the smaller viewports, and will get the smaller image.

5

I imagine browsers compile all the css first before loading images. Couldn’t you test it by creating an insanely large image and see if it affects load time on a device?

6

Thanks guys. Problem solved.
.

7

How was it solved? Are the large images DL’d first or will the smaller @media rules be followed?