TThis has two sets of code. The first is the CSS is which is an example only. The next file is the random image php from a directory for Genesis (modifiable for any WordPress theme). Adjust as needed for your requirements. If this saved you time, and I'm sure it did, consider a donation via PayPal to [email protected]

random-hero-image.css

.my-hero-container {
	position: relative;
	height: 20vh;
	min-height: 150px;
}

@media (min-width: 800px) {
	.my-hero-container {
		height: 45vh;
		min-height: 250px;
		max-height: 300px;
	}
}

@media (min-width: 1000px) {
	.my-hero-container {
		height: 45vh;
		min-height: 300px;
		max-height: 350px;
	}
}

@media (min-width: 1200px) {

	.my-hero-container {
		max-height: 400px;	
	}

}

random-hero-image.php

<?php
// don't re-add

/**
 * Get Random Images from directory
 * Modifield from http://apexlogic.net/code-bank/php/random-background-images-with-css-and-php/
 * $directory is where your png and jpgs are located, here they are in the assets/images/hero dir, change to your dir
 */
function christina_random_image_dir() {

	$directory    = get_stylesheet_directory() .'/assets/images/hero/'; //* set the directory where your .png and .jpgs are from the location of your child theme
	$count        = 0;
	$images_array = array();
		
	if ( $handle = opendir( $directory ) ) :
		
		while (false !== ( $entry = readdir( $handle ) ) ) :
		
		$path = $directory . $entry;
		
			if( is_file( $path ) ) :	
			
				if( mime_content_type( $path ) == 'image/jpeg' || mime_content_type( $path ) == 'image/png' ) :
					$images_array[$count]= $path;
					$count = $count+1;
				endif; //if image type is jpeg or png
			
			endif; //file path exists	
		
		endwhile;	
	
		$random_image = mt_rand( 0,( $count-1 ) );	
		$val = $images_array[ $random_image ];
	
	endif;
	
	closedir( $handle );
	
	return( $val );

}
 
/**
 * Turn christina_random_image_dir() into absolute url
 */
function christina_random_image_url() {

	$dir            = get_stylesheet_directory();
	$ab_dir         = get_stylesheet_directory_uri(); 
	$random_img_raw = christina_random_image_dir();
		
	$random_url = str_replace( $dir, $ab_dir, $random_img_raw ); 
	
	return esc_url( $random_url );

}


/////////////// Example Usage


add_action( 'genesis_before_content_sidebar_wrap','prefix_display_hero_container', 0 );
/**
 * Add a div in the 'genesis_before_content_sidebar_wrap' hook
 */
function prefix_display_hero_container() {

	echo '<div class="my-hero-container" aria-hidden="true"></div>';

}


add_action( 'wp_enqueue_scripts', 'prefix_example_random_bg_img_css' );
/**
 * CSS output this adds the background-image CSS to the head of the doc
 * The class of the div is '.my-hero-container' (change this) and it marries with the 
 * 'prefix_display_hero_container()' function's div
 * Learn Genesis and html/css: https://knowthecode.io/
 */
function prefix_example_random_bg_img_css() {

	$css = '.my-hero-container { background-image: url(' . christina_random_image_url() . '); }';
	
	$css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

	wp_add_inline_style( 'theme-style-handle', $css );
	
}