Full screen background image(s) -- could be a slideshow

footer.php

    <section class="backgrounds"><?php
        wp_reset_query();
        global $post ;

        //Populate the attachments array in $post with the background graphics
        $post = Post_Attachments::setup_post_background_graphics($post);

        //Output the first image in the set
        //Down the road we could optionally display a background here instead
        if (count($post->attachments) > 0) : $background_source = wp_get_attachment_image_src($post->attachments[0]->ID, $size = 'full', $icon = false); ?>

        <figure class="background"><img src="<?php echo $background_source[0] ?>" alt="<?php echo $post->attachments[0]->post_title ?>"></figure><?php
        
        endif ?>

    </section><!-- .background -->  	
    <?php wp_footer() //All the website scripts are generated in functions.php ?>
</body>

SCSS

//The slideshow container is positioned below all other content to display like a background image
section.backgrounds { 
	position: absolute ;
	z-index: 0 ;
	top: 0 ; left: 0 ;
	width: 100% ; height: 100% ; 
	overflow: hidden !important ; //This keeps the 200% dimensions used below in check and not showing scroll bars
	
	figure.background {
		//The following trick is used to display the slideshow slides at the full-width of the screen
		//This effect looks just like using background-size: cover ; but is supported by older browsers
		position: absolute !important ;
		z-index: 0 ;
		top: -50% !important ; left: -50% !important ;
		width: 200% ; height: 200% ;

		img {
			position: absolute ; 
			z-index: 0 ;
			top: 0 ; bottom: 0 ; left: 0 ; right: 0 ; 
			margin: auto ; 
			min-width: 50% ; min-height: 50% ;
		}
	}
}