Responsive & Retina Content Images using simple CSS & a spacer PNG – HTML5/CSS3 Experiment – Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3

Responsive & Retina Content Images using simple CSS & a spacer PNG – HTML5/CSS3 Experiment – Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3.

FANTASTIC!

The problem with media queries and responsive design at the moment is there’s no “real” way to deliver a particular content image (that’s referenced in an img tag) for different breakpoints and resolutions.

So, it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images.

All it requires is a blank PNG or GIF the same size as the intended image, and then setting that image’s background to whatever image needs to be served along with background-size: contain.

It works because the spacer PNG is transparent, which allows the image’s background image to be visible. Because the background is set with CSS, it can then be changed with media queries as required to serve different images to different viewport sizes or resolutions.

And yes, it even works with serving “retina images” to the new iPad.