Retina background images and IE8
Quick tip, with thanks to David Owens for the inspiration.
Problem: IE8 doesn't support background-size, so you have to include a separate stylesheet with separate background images just for IE8 if you have to code for it.
Solution:
background:url('../img/non-retina.png') no-repeat center right;
background-image:url('../img/[email protected]'), none;
This will serve a non-retina image to IE8 and a retina image to everything else, which can be sized with background-size. IE8 doesn't support multiple backgrounds per element, everything else does.
Combine with the technique of saving retina sized JPEGs at really low quality (~30% - example here) to address all browsers with the same images and not have to worry about any image replacement malarkey or
Thursday Top Tip!