Hero background image - make it responsive?

Support Themes & Styling
1

I’m just starting with Grav Quark theme and getting my head around twigs.

I can see an image normally renders an img tag with a srcset when there is a set of responsive images to use. I want to do the same for the background image of a hero module so that it uses a srcset/image-set.

I have been playing around with hero.html.twig using the derivatives method as below:-

<section id="{{ id }}" class="section modular-hero hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}" 
{% if hero_image %}style="background-image: url('{{ hero_image.url }}')
 image-set('{{ hero_image.derivatives(480, 640, 960, 1280, 1600, 2240) }}') "
{% endif %} >
    <div class="image-overlay"></div>
    <section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
        {{ content|raw }}
    </section>
</section>

This does output the srcset filenames but it is all intended for an HTML img tag of course:-

<section id="" class="section modular-hero hero hero-large text-light hero1 img-responsive " style="background-image: url('/user/pages/01.home/01._hero/hero1.jpg')
 image-set('<img alt=" "="" src="/user/pages/01.home/01._hero/hero1.jpg" srcset="/user/pages/01.home/01._hero/hero1@2x.jpg 960w, /user/pages/01.home/01._hero/hero1@3x.jpg 1280w, /user/pages/01.home/01._hero/hero1@4x.jpg 1600w, /user/pages/01.home/01._hero/hero1@5x.jpg 2240w, /user/pages/01.home/01._hero/hero1@6x.jpg 480w, /user/pages/01.home/01._hero/hero1@7x.jpg 2500w, /user/pages/01.home/01._hero/hero1.jpg 640w" sizes="100vw">') ">

I’m thinking I’m not too far away from where I want to be by using hero_image.derivatives but I need a method that doesn’t have all the img tag bits and pieces.

Can anyone suggest where I should look?

2

Any one any thoughts on this?

Kind regards,
Xavier