Thanks to media queries, we have the ability to load in different background images, not just at different viewport sizes but also different viewport resolutions.

For example, here is the official way of specifying a background image for a 'normal' and a high DPI screen. You can find this in example_06-07:

.bg {
    background-image: url('bg.jpg');
}
@media (min-resolution: 1.5dppx) {
    .bg {
        background-image: url('bg@1_5x.jpg');
    }
}

The media query is written exactly as it is with width, height, or any of the other capability tests. In this example, we are defining the minimum resolution that bg@1_5x.jpg should use as 1.5dppx (device pixels per CSS pixel). We could also use dpi (dots per inch) or dpcm (dots per centimeter) units if preferable. However, despite the poorer support, I find dppx the easiest unit to think about; as 2dppx is twice the resolution, 3dppx would be three times the resolution. Thinking about that in dpi is trickier. 'Standard' resolution would be 96dpi, twice that resolution would be 192dpi and so on.

Support for the 'dppx' unit isn't great right now (check your target browsers at http://caniuse.com/) so to get this working everywhere smoothly, you'll need to write a few versions of the media query resolution or, as ever, rely on a tool to do the prefixing for you.