pages/layouts/partials/scrolling-image-header.html

{{ $imgsrc := print "images/" (.Param "cardImage") ".jpg" }}
{{ $mainimg := resources.Get $imgsrc }}
{{ $cardImageDescription := .Param "cardImageDescription" }}
{{ $croppedImage := $mainimg.Fill "6000x2000 center" }}

<style>
  .motto::before {
    background-image: url('{{ $croppedImage.RelPermalink }}');
  }
</style>

<div class="motto" title="{{ $cardImageDescription }}">
  <div class="motto-inside">
    <h1 id="motto">
      {{ default .Title (safeHTML (.Param "motto")) }}
    </h1>
  </div>
</div>