How can I make a dynamically inserted CSS background image responsive?

1 Views

I created a slider in WordPress using CSS background image URL dynamically inserted by php. 

foreach ($slides as $key => $value){
    array_push($output,'<div class="slider-slide" style="background-image:url(' . wp_get_attachment_image_src($value['image'], 'full')[0] . ');">');
    array_push($output,'</div>');
}

I did this because it works better responsively, I.e. it scales down nicely by just setting the background size to cover and giving a max height.

Read More
background-size:cover;

My problem is that because I have used the full size image url, although it still scales nicely it will always load in the full image rather than the srcset image that would have been loaded if I was using the standard WordPress attachment function (link for info on srcset update).

Any suggestions would be appreciated.

Post Views: 1

Related posts