title: Dynamically change background image in the CSS during WordPress loop (media queries)
body: <p>I currently have a carousel on my page inside a Wordpress loop. So as it loops through it changes the background image according to which post I am currently on in the loop. However, I want to use media queries to load smaller images if for instance I the screen size is smaller.</p>
  
  <p>This is what I currently have:</p>
  
  <pre><code>    while( $loop-&gt;have_posts() ) : $loop-&gt;the_post();
  
  
          $class = '';
  
          // Custom Posts
          $carousel_image_1       = get_field('carousel_image_1');
          $image_1_title          = get_field('image_1_title');
  
          if( $slide_counter == 0 ) { $class .= ' active'; }
  
  ?&gt;
  
          &lt;div class="item &lt;?php echo $class ?&gt; &lt;?php echo "slide_" . $slide_counter ?&gt;"&gt;
              &lt;!-- Set the first background image using inline CSS below. --&gt;
              &lt;a href="&lt;?php echo get_post_permalink(); ?&gt;" target="_blank"&gt;
              &lt;div class="fill" style="background-image:url(&lt;?php echo $carousel_image_1['url']; ?&gt;); background-size:cover;" alt="&lt;?php echo $carousel_image_1['alt']; ?&gt;"&gt; &lt;/div&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h2&gt;&lt;?php echo $image_1_title; ?&gt;&lt;/h2&gt;
                  &lt;img width="80" class="book" src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/assets/img/book.png" alt=""&gt;
              &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;?php $slide_counter++; ?&gt;
  
      &lt;?php endwhile; wp_reset_query(); ?&gt;
  </code></pre>