I have been working with a Quark child theme, particularly handing some hero images to different (not modular or blog) pages using a page-hero.html.twig partial template with the following
<section id="{{ id }}" class="section page-hero hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}" {% if hero_image %}style="background-image: url({{ hero_image.url }});"{% endif %}>
<div class="image-overlay"></div></section>
The partial template is called from the page.html.twig template.
In the front matter for a sample page, I have the following
title: Sample page
body_classes: title-center title-h1h2
hero_classes: parallax overlay-dark-gradient hero-medium
hero_image: my-image.jpg
The expected Quark CSS is applied, with the size of the hero element and gradient overlay visible. However, the image itself is not displayed.
I have worked on a handful of Grav sites and still learning many aspects of how things work (including being new to twig). I am not sure what I am missing and potentially doing weather wrong or in a way that could be more effective.
Appreciate any assistance with this. I posted about a week ago in Discord, though can give more context here, and hopefully there is an opportunity for a solution that others can search for at a later stage.
I noted a recent post by @Totti1992 also indicated this is a design element others are having trouble with/seeking to learn.