How to use picture element as background image?

Question

With the simple image field we are able to set the image style and use that to set the image as a background for a div tag (see example below). HOwever, as Drupal 8 has Responsive Image module, the image field will generate like below. With different breakpoints, different images are fetched by the browser, but this make it difficult to set the image as a background.

The current implementation is flexible because as the text grows so does the height of the div containing the image as a background image.

How would you use the picture tag to set the image as a background? I have not found a way to have Drupal detect what image is being fetched by the browser.

Goal:

1. Have image as a background
2. Overlay text on top of image
3. As the overlay text grows, so does the div containing the text. As such the image as a background should grow as well.

Current implementation without Responsive Images:

<div class="wrapper">
    <div class="wrapper_img" style="background-image: url('/sites/default/files/banner_large/name.jpg')"></div>
    <div class="wrapper_content">Authoritatively reinvent magnetic ROI without excellent interfaces. Professionally drive extensive manufactured products through 24/365 leadership. </div>
</div>

Responsive image outputs which makes it difficult to set the background image (banner_large, banner_medium, banner_small are image styles)

<picture>
<source srcset="/sites/default/files/banner_large/name.jpg 1x" media="all and (min-width:1200px) type="image/png" >
<source srcset="/sites/default/files/banner_medium/name.jpg 1x" media="all and (min-width:768px) type="image/png" >
<source srcset="/sites/default/files/banner_small/name.jpg 1x" media="all and (min-width:320px) type="image/png" >

<img src="/sites/default/files/banner_small/name.jpg" alt="text" typeof="foaf:Image">

</picture>

Answer 1

Found that we can modify the responsive-image.html.twig to do what we need. We used a combination of the following links:

1. Responsive images
2. Responsive images (MDN Web docs)