Getting

• daveoudshoorn

• June 27, 2019 at 8:31 pm

Hi,

For a while I’ve been using retrieved images as backgrounds. It works, but I just can’t seem to find a solution to make it responsive (and retrieving smaller images for mobile etc.).

I’ve seen Object-fit, but the support for IE11 isn’t there.

I’ve tried the following, retrieving multiple images and using CSS to hide/show elements but it still loads both.

Any suggestions?

<?php
    $attachment_id = get_sub_field('image');
    $size = "full";
    $sizeMob = "mobilesize"; 
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $imageMob = wp_get_attachment_image_src( $attachment_id, $sizeMob );
?>

<div class="bg-img mobile" style="background-image: url('<?php echo $imageMob[0]; ?>')"></div>
<div class="bg-img desktop" style="background-image: url('<?php echo $image[0]; ?>')"></div>