Fixed Fullscreen Masthead

Markup

<section
  class="section section-masthead section-masthead_fixed section-fullheight text-center bg-dark-1" 
  data-arts-scroll-fixed="true" 
  data-arts-os-animation="true" 
  data-arts-theme-text="light"
>
  <div class="section-masthead__inner section-fullheight__inner section-fullheight__inner_mobile container">
    ...
  </div>
  <div
    class="section-masthead__background section-masthead__background_fullscreen" 
    data-arts-parallax-factor-y="-0.15"
  >
    ...
  </div>
</section>

Elements

• .section-masthead_fixed – Outer section element.
• .section-masthead__inner – Inner container that will fade out on scroll.
• .section-masthead__background_fullscreen – Background image that will stay fixed on scroll. You can apply an optional parallax effect on this element.

Showcase

• 📄 045-blog-single-post-fullscreen.html