# 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 – the inner container that will fade out on scroll.
  • .section-masthead__background_fullscreen – background image that will stay fixed on scroll. You can put an optional parallax effect on this element.

# Showcase

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