# Parallax


Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. We build a component who will let you use this beautiful effect very simple:

<parallax class="page-header header-filter header-small" parallax-active="true" :style="headerStyle">
  <div class="container">
    <div class="md-layout">
      <div class="md-layout-item">
        // your content here
      </div>
    </div>
  </div>
</parallax>

You have the option to remove this parallax effect by simple changing the attribute parallax-active="true" to parallax-active="false"