Mark · Patterns

Parallax band

A photograph that holds still while the page moves over it, carrying a heading and one button. The effect is background-attachment: fixed, which iOS declines — there it degrades to a plain fixed image, which is why the scrim is on by default rather than being part of the motion.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

Default

Full page preview ↗

Medium height, centred, scrim on — the band a page drops in to change the subject.

Since 2016

Made a few miles from here.

Every piece is cut, joined and finished in the same shop it was drawn in.

Visit the workshop 
<section class="parallax d-flex align-items-center py-6" data-parallax data-bs-theme="dark" style="min-height:60vh">
  <div class="parallax__bg" style="background-image:url('/assets/img/everlasting.jpg')"></div>
  <div class="parallax__scrim"></div>
  <div class="mk-container parallax__content text-center">
    <div class="mk-measure mk-measure--inset">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-3">Since 2016</p>
      <h2 class="display-6 mb-3">Made a few miles from here.</h2>
      <p class="lead mb-4">Every piece is cut, joined and finished in the same shop it was drawn in.</p>
      <a class="mk-btn mk-btn--inverse mk-btn--lg" href="#">Visit the workshop</a>
    </div>
  </div>
</section>
image: /assets/img/everlasting.jpg
eyebrow: Since 2016
title: Made a few miles from here.
lead: Every piece is cut, joined and finished in the same shop it was drawn in.
cta_label: Visit the workshop
cta_href: #

Tall, ranged left

Full page preview ↗

size: lg with align: start — more photograph, and copy that sits in the corner rather than the middle.

The long view.

A band with room to breathe, for a photograph worth giving the height to.

See the work 
<section class="parallax d-flex align-items-center py-6" data-parallax data-bs-theme="dark" style="min-height:80vh">
  <div class="parallax__bg" style="background-image:url('/assets/img/everlasting.jpg')"></div>
  <div class="parallax__scrim"></div>
  <div class="mk-container parallax__content">
    <div class="mk-measure mk-measure--inset ms-0">
      <h2 class="display-6 mb-3">The long view.</h2>
      <p class="lead mb-4">A band with room to breathe, for a photograph worth giving the height to.</p>
      <a class="mk-btn mk-btn--inverse mk-btn--lg" href="#">See the work</a>
    </div>
  </div>
</section>
image: /assets/img/everlasting.jpg
size: lg
align: start
title: The long view.
lead: A band with room to breathe, for a photograph worth giving the height to.
cta_label: See the work
cta_href: #

Photograph as-is

Full page preview ↗

scrim_enabled: false drops the overlay. Only safe when the image is dark enough on its own — nothing else is keeping the text readable.

No scrim.

<section class="parallax d-flex align-items-center py-6" data-parallax data-bs-theme="dark" style="min-height:40vh">
  <div class="parallax__bg" style="background-image:url('/assets/img/everlasting.jpg')"></div>
  <div class="mk-container parallax__content text-center">
    <div class="mk-measure mk-measure--inset">
      <h2 class="display-6 mb-3">No scrim.</h2>
    </div>
  </div>
</section>
image: /assets/img/everlasting.jpg
scrim_enabled: false
size: sm
title: No scrim.
Fields (15)
FieldTypeNotes
eyebrow text
title text
lead textarea
cta_label text
cta_href url
cta_variant text
image image required
scrim_enabled boolean Overlay that keeps light text readable
size text sm, md, lg, or full (viewport height)
min_height text Overrides Height with an explicit value, e.g. 480px
align text center or start
container text
shape_bottom group Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing.
shape_top group The same, on the band's TOP edge — it hangs upward over the band above.
class_names text
On this page