<section id="Organism-hero--default" class="l-section u-cf">
<section class="hero">
<style>
#BgImage-hero--default {
background-image: url("../../assets/bridge-676-504.jpg");
}
</style>
<div id="BgImage-hero--default" class="hero_image u-bg-theme"></div>
<div class="hero_text l-containerSmall">
<p class="u-h5 hero_label">Lorem ipsum</p>
<h1 class="hero_title">Lorem ipsum</h1>
</div>
<div class="l-containerSmall">
<div class="typography hero_intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
</section>
</section>
<section id="Organism-{{ _self.handle }}" class="l-section u-cf">
<section class="hero">
<style>
#BgImage-{{ _self.handle }} {background-image: url("{{ path image }}");}
</style>
<div id="BgImage-{{ _self.handle }}" class="hero_image u-bg-theme"></div>
<div class="hero_text l-containerSmall">
<p class="u-h5 hero_label">{{label}}</p>
<h1 class="hero_title">{{label}}</h1>
</div>
<div class="l-containerSmall">
<div class="typography hero_intro">
{{{htmlText}}}
</div>
</div>
</section>
</section>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"image": "/assets/bridge-676-504.jpg"
}
Background images should be handled by the user, this will differ depending on the system where the css is used.
Keep in mind that, in an ideal case, images should be optimised for different screen sizes via media-queries. Example https://www.unibz.it/ (see the source code).