php – How to dynamically set a background-image size?


I have a 1600 x 1000 image that’s used as a background image, with an ACF repeater field that outputs each section, each with its own unique background image. I’m concerned about mobile. Is there a way to dynamically populate the background image size based on wp_if_mobile()? Here’s a bit of my code:

$banners = get_field('home_page_banner');

foreach ($banners as $banner) {
      $background_image = $banner['background_image']; //Here's the variable, which is set to ACF Image Field Array.

     //additional vars here

      echo '<div class="home-page-banner grayscale" style="background-image: url(' . esc_url($background_image['url'])  . '); ">'; // Here's where the background-image goes

      //other stuff in here


    }; ?>

I was thinking about something like:

$background_image = $banner['background_image']

if( wp_is_mobile() ) {
  $background_image = $banner['background_image][sizes]['some_smaller_size_here'];


sackadelic 4 weeks 2021-05-13T13:19:11-05:00 0 Answers 0 views 0

Leave an answer