How to use an image with Responsive Image style as a background? We have a need to use the Responsive Image module. The key is that we want to be able to use the image (field_image) field with Responsive Image styles as a background and put the node's title on top of them. 

How can we achieve this?

We have tried the following but this only fetches the original photo in a twig template. In other words, when i use Chrome Dev tools to see if it fetched the other images as part of the Responsive Image style settings, it does not fetch them. 

&lt;div class="wrapper"&gt;
    &lt;div class="wrapper__image" style="background-image: url('{{file_url(content.field_image.0['#item'].entity.uri.value)}}&gt;
    &lt;/div&gt;
    &lt;div class="wrapper__content"&gt; {# title goes here #} &lt;/div&gt;
&lt;/div&gt;


Sample image:


Currently we are using the out of the box Responsive Image twig template 

{% if output_image_tag %}
  {{ img_element }}
{% else %}
  &lt;picture&gt;
    {% if sources %}
      {#
      Internet Explorer 9 doesn't recognise source elements that are wrapped in
      picture tags. See http://scottjehl.github.io/picturefill/#ie9
      #}
      &lt;!--[if IE 9]&gt;&lt;video style="display: none;"&gt;&lt;![endif]--&gt;
      {% for source_attributes in sources %}
        &lt;source{{ source_attributes }}/&gt;
      {% endfor %}
      &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
    {% endif %}
    {# The controlling image, with the fallback image in srcset. #}
    {{ img_element }}
  &lt;/picture&gt;
{% endif %}
What you're trying isn't going to work on a background image. You'd need to do this yourself with javascript. How i've done it previously is added data attributes to the div for each breakpoint e.g.

&lt;div data-mobile-image="mobilestylename/aaa.jpg" data-desktop-image="desktopstylename/aaa.jpg"&gt;


Then in javscript use matchmedia or a body class if its already being added by your theme to know which breakpoint you are in and then do 

var mobile_image = $('.mydiv').data('mobile-image');
$('.mydiv').css('background-image',mobile_image);