How do I refactor this responsive background images code?
If the browser doesn't support the property/value combination in its entirety, it will ignore it.  There's no need to do feature detection for this.

body { background: url(&lt;?php echo $img_med; ?&gt;) no-repeat center center fixed; }
body { background: url(&lt;?php echo $img_med; ?&gt;), url(&lt;?php echo $img_medium; ?&gt;);
background-size: cover;
background-repeat: no-repeat; }


If you care about older Android devices, you'll want to provide prefixed versions of background-size.

Make use of the cascade!  The first media query is no media query at all

body {
    background: url(&lt;?php echo $img_medium; ?&gt;) no-repeat center center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

@media (min-width: 400px) {
    body {
        background-image: url(&lt;?php echo $img_med; ?&gt;);
        background-image: url(&lt;?php echo $img_med; ?&gt;), url(&lt;?php echo $img_medium; ?&gt;);
    }
}

@media (min-width: 1000px) {
    body {
        background-image: url(&lt;?php echo $img_thelarge; ?&gt;);
        background-image: url(&lt;?php echo $img_thelarge; ?&gt;), url(&lt;?php echo $img_med; ?&gt;), url(&lt;?php echo $img_medium; ?&gt;);
    }
}

/* cut out the 1800px media query since it looked identical to the 1000px one */