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' => 'attachment',            'numberposts' => 1,            'post_status' => null,            'post_parent' => $post->ID,            'post_mime_type' => 'image'            );            $attachments = get_posts( $args );            if ( $attachments ) :                foreach ( $attachments as $attachment ) :                    $img_thelargeArr = wp_get_attachment_image_src( $attachment->ID, full);                    $img_medArr = wp_get_attachment_image_src( $attachment->ID, med);                    $img_mediumArr = wp_get_attachment_image_src( $attachment->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.<style media=screen> @media (min-width: 1800px) {body { background: url(<?php echo $img_thelarge; ?>) no-repeat center center fixed;background-size: cover; }html.multiplebgs body { background: url(<?php echo $img_thelarge; ?>), url(<?php echo    $img_med; ?>), url(<?php echo $img_medium; ?>);background-size: cover;background-repeat: no-repeat; }} @media (min-width: 1000px) and (max-width: 1799px) {body { background: url(<?php echo $img_thelarge; ?>) no-repeat center center fixed;background-size: cover; }html.multiplebgs body { background: url(<?php echo $img_thelarge; ?>), url(<?php echo $img_med; ?>), url(<?php echo $img_medium; ?>);background-size: cover;background-repeat: no-repeat; }}@media (min-width: 400px) and (max-width: 999px) {body { background: url(<?php echo $img_med; ?>) no-repeat center center fixed;background-size: cover; }html.multiplebgs body { background: url(<?php echo $img_med; ?>), url(<?php echo $img_medium; ?>);background-size: cover;background-repeat: no-repeat; }}@media (max-width: 399px) {body { background: url(<?php echo $img_medium; ?>) no-repeat center center fixed;background-size: cover; }}</style>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->ID instead of $attachment->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?
How do I refactor this responsive background images code?
php;css;wordpress