ACF responsive background image method

gistfile1.txt

https://acfextras.com/responsive-background-image-acf/

function biscuit_responsive_hero_image_css(){
 
$image = get_field( 'hero_page_image' );
// Get the Image from ACF, then set a big and small version of it from predefined custom image sizes
$big_image_output = wp_get_attachment_image_url( $image, 'hero-slide'); // Use ACF Image ID not Array or URL
$small_image_output = wp_get_attachment_image_url( $image, 'mpu-medium');
// Add it to a custom CSS file that is already being enqueued. The handle ('hero-image-css' in this case), must match below and in the enqueue_style line.
$custom_css = "
/* Mobiles */
    .hero-image-bg{
background-image:url('{$small_image_output}');
}
/* Desktop */
@media screen and (min-width: 768px) {
    .hero-image-bg{
       background-image:url('{$big_image_output}');
      } 
} ";
wp_add_inline_style( 'hero-image-css', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'biscuit_responsive_hero_image_css' ,30);