Fixed Background Image

Scrollable content areas with fixed background images

Content Area + fixed background image

This is a placeholder content area

Content Area + fixed background image

Code Example Shortcut: z-fixed-background

<z-container>
  <z-row class="fixed-background h-350">
    <z-col class="text-center flex-center-vertical">
      <img src="../../docs/images/placeholder/16x9/MaevaVigier.jpg" alt="Background Image">
      <h2 class="text-white">Content Area w fixed background image</h2>
    </z-col>
  </z-row>
</z-container>

This effect relies on background-attachment:fixed which is not widely supported in mobile browsers. More information: https://caniuse.com/background-attachment

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.