Fixed Background (Parallax Style) Hero Template

Add a dynamic, layered feel to your website with this classic fixed-background hero section.

This popular effect is often referred to as a parallax-style effect, creating an illusion of depth by keeping the background image stationary while the foreground content scrolls over it.

A hero section demonstrating a parallax-style fixed background effect.

Get Source Code Preview

About the Fixed Background Hero

The fixed background effect can significantly elevate a website's design. This template achieves the effect using only CSS, making it lightweight, performant, and very easy to implement. It is an excellent choice for storyteller sites, product showcases, and modern portfolios where you want to add a sense of depth without the overhead of JavaScript.

For a true parallax effect, where the background image also scrolls, but at a slower rate than the overlaid content, see the Parallax Scroll Hero.

Features

Pure CSS Parallax-Style Effect: The entire effect is achieved with a single line of CSS, requiring no JavaScript.
Creates Depth: Adds a sophisticated, layered feel to your page design.
Text Legibility: Includes a semi-transparent overlay to ensure text is clear over any background image.
Fully Responsive: The effect works across modern devices that support the CSS property.

Code Breakdown

The component is split into CSS for your site's head and HTML for the body. The provided HTML includes a second section below the hero to create enough scrollable space to demonstrate the effect.

The main player in this template is background-attachment: fixed. It's important to note that while this creates a popular parallax-style effect, true parallax involves the background moving at a slower speed, which requires JavaScript. This pure CSS approach "fixes" the background relative to the viewport. As you scroll the page, the section element moves, but its background image stays put. This difference in movement creates the illusion of depth.

This property works in tandem with background-position: center and background-size: cover to ensure the fixed image is well-placed and always covers the background area. The centered text content is layered on top using Flexbox.

Code

<style>
    :root {
        /*
            Using an image from picsum.photos for demonstration.
            Replace with your own image.
        */
        --fbh-bg-image: url('https://picsum.photos/id/1018/1600/1000');
        --fbh-min-height: 80vh;
        --fbh-padding: 3rem 1.5rem;
        --fbh-text-color: #ffffff;
        --fbh-overlay-color: rgba(17, 24, 39, 0.5);
        --fbh-cta-bg: #fff;
        --fbh-cta-text-color: #111827;
        --fbh-cta-hover-bg: #f3f4f6;
    }
    .fixed-bg-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        min-height: var(--fbh-min-height);
        padding: var(--fbh-padding);
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        /* The Parallax-Style Effect */
        background-image: var(--fbh-bg-image);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .fixed-bg-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--fbh-overlay-color);
        z-index: 1;
    }
    .fixed-bg-hero * {
         box-sizing: border-box;
    }
    .fbh-content {
        position: relative;
        z-index: 2;
        max-width: 1000px;
        color: var(--fbh-text-color);
    }
    .fbh-content .title {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 800;
        line-height: 1.1;
        margin: 0 0 1rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .fbh-content .subtitle {
        font-size: clamp(1.1rem, 3vw, 1.25rem);
        margin: 0 0 2rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    .fbh-content .cta {
        display: inline-block;
        background-color: var(--fbh-cta-bg);
        color: var(--fbh-cta-text-color);
        padding: 0.9rem 2.2rem;
        border-radius: 8px;
        border: none;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .fbh-content .cta:hover {
        background-color: var(--fbh-cta-hover-bg);
    }

/* Extra content section for demonstrating the scroll effect */
    .scroll-demo-content-fb {
        padding: 4rem 1.5rem;
        background-color: #fff;
        color: #111827;
    }
    .scroll-demo-content-fb p {
        max-width: 700px;
        margin: 0 auto 1rem;
        line-height: 1.6;
    }
</style>

<section class="fixed-bg-hero">
    <div class="fbh-content">
        <h1 class="title">Create a Lasting Impression</h1>
        <p class="subtitle">This simple and elegant effect adds a layer of depth, making your content more engaging and memorable.</p>
        <a href="#" role="button" class="cta">Get Started</a>
    </div>
</section>

<section class="scroll-demo-content-fb">
    <p>Scroll down to see the fixed background effect in action. Notice how the content in this section scrolls normally over the stationary background image of the hero above.</p>
    <p>The effect is created with a single line of CSS, `background-attachment: fixed;`, which "fixes" the background image to the viewport, while the rest of the page scrolls over it.</p>
</section>

View Output