How do I refactor this responsive background images code? In my latest project I am using fullscreen background images for each page. I decided to write some code to fetch the different thumbnail sizes and then use it as a background for the appropriate viewport size using media queries. I also made sure that in the case of big screens the smallest image loads first so that the visitor is mostly never greeted with a blank or loading background. I set the image as the featured image of the page and then call it using this code-

$args = array(
            'post_type' =&gt; 'attachment',
            'numberposts' =&gt; 1,
            'post_status' =&gt; null,
            'post_parent' =&gt; $post-&gt;ID,
            'post_mime_type' =&gt; 'image'
            );

            $attachments = get_posts( $args );

            if ( $attachments ) :
                foreach ( $attachments as $attachment ) :
                    $img_thelargeArr = wp_get_attachment_image_src( $attachment-&gt;ID, "full");
                    $img_medArr = wp_get_attachment_image_src( $attachment-&gt;ID, "med");
                    $img_mediumArr = wp_get_attachment_image_src( $attachment-&gt;ID, "medium");

                    $img_thelarge = $img_thelargeArr[0];
                    $img_med = $img_medArr[0];
                    $img_medium = $img_mediumArr[0];
                endforeach;
            endif;


And then in the page.php (or whichever template file with full background) itself I added the following style tag to display images providing fallback for bigger screen sizes so that the background loads progressively.

&lt;style media="screen"&gt;
 @media (min-width: 1800px) {
body { background: url(&lt;?php echo $img_thelarge; ?&gt;) no-repeat center center fixed;
background-size: cover; }
html.multiplebgs body { background: url(&lt;?php echo $img_thelarge; ?&gt;), url(&lt;?php echo    $img_med; ?&gt;), url(&lt;?php echo $img_medium; ?&gt;);
background-size: cover;
background-repeat: no-repeat; }
} 

@media (min-width: 1000px) and (max-width: 1799px) {
body { background: url(&lt;?php echo $img_thelarge; ?&gt;) no-repeat center center fixed;
background-size: cover; }
html.multiplebgs body { background: url(&lt;?php echo $img_thelarge; ?&gt;), url(&lt;?php echo $img_med; ?&gt;), url(&lt;?php echo $img_medium; ?&gt;);
background-size: cover;
background-repeat: no-repeat; }

}

@media (min-width: 400px) and (max-width: 999px) {
body { background: url(&lt;?php echo $img_med; ?&gt;) no-repeat center center fixed;
background-size: cover; }
html.multiplebgs body { background: url(&lt;?php echo $img_med; ?&gt;), url(&lt;?php echo $img_medium; ?&gt;);
background-size: cover;
background-repeat: no-repeat; }
}

@media (max-width: 399px) {
body { background: url(&lt;?php echo $img_medium; ?&gt;) no-repeat center center fixed;
background-size: cover; }
}
&lt;/style&gt;


This works as expected but I am using this for a bunch of other page templates as well and was wondering if I can move this code to a single PHP file and reference it from each of these templates. I don't know OOP so need help to figure this out. There is only one variation in one of the templates I am using $post-&gt;ID instead of $attachment-&gt;ID.

How do I set this up as a function that can be referenced from an external PHP file in the theme folder itself?  Is it possible to use JavaScript to add inline styles instead of a style tag on the pages?  How do I go about this?
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 */