Photo by Luca Micheli  on Unsplash

Backdrops

Backdrops provide a useful design pattern—placing a translucent image behind contextual content. Backdrops offer two distinct style variants: Image proportional and fixed height.

Accessibility Spotlight

Backdrops remove the need for CSS background images. Feature images exist within the HTML, so screen readers can read the text of the image's alt attribute.


Image Proportional

Image proportional backdrops scale and stack responsively. Below is an example of a basic image proportional backdrop.

In Their Eternal Faces
The Sun—with just delight

Emily Dickenson Poetry
<div class="backdrop theme-dark border-radius">

    <div class="backdrop__image">

       <img class="opacity-50" src="https://via.placeholder.com/1500x750" alt="Placeholder" />

        <div class="backdrop__image__credit">
            <p>Photo by <a href="#1">Jane Doe</a> on Unsplash</p>
        </div>

    </div>

    <div class="backdrop__cover">

        <div class="container text-align-center">
            <p class="h4 text-shadow margin-bottom-3">
                <em>In Their Eternal Faces<br>The Sun—with just delight</em>
            </p>
            <a class="button font-size-md theme-primary" href="#1">
                Emily Dickenson Poetry
            </a>
        </div>

    </div>

</div>
Figure 1
Line #Details
1

The parent .backdrop selector is required.

The .theme-dark utility class is optional. It provides the background and text color. If not present, these colors are inherited from the backdrop's nearest ancestor (with a theme color applied).

The .border-radius utility class is optional.

3-11

The .backdrop__image selector is required.

It contains the feature image.

The .backdrop__image__credit grandchild selector is optional.

It is where you provide a credit for the image.

13-24

The .backdrop__cover selector is required.

It holds the backdrop's contextual content.

The size of this backdrop (proportional width and height) is determined by the size of its feature image.

The translucent effect of the backdrop is acheived with the use of additional utility classes. Our theme color utilities (e.g. .theme-dark) provide the background and text color. The opacity utility class (e.g. .opacity-30) applied to the backdrop's feature image, allows the background color to show through.

Stack Breakpoint Modifiers

When using image size proportional backdrops for featured content (like the full-width example below) the backdrop may become too tall for the image on smaller viewport sizes.

The mountain at a given distance In amber lies

—Excerpt from Delight becomes pictoral

To occomodate small viewports, include a stack breakpoint modifier (e.g. .backdrop--stack--{x}) to the .backdrop selector. Where x equals the desired breakpoint (e.g., lg for large). The backdrop's image is placed above the content vertically until the viewport reaches the desired breakpoint specified in the modifier.

The mountain at a given distance In amber lies

—Excerpt from Delight becomes pictoral

The above example shows how the same full-with backdrop appears on a smaller (mobile) viewport.

Notice, too, the image is at full opacity. That's because our opacity classes have their own a breakpoint modifiers. Adding .opacity-40--lg to the .backdrop__image selector gives that image a specified opacity (40%) at the large (lg) breakpoint.

Figure 2 (below) provides code used to create the backdrop above. Refer specifically to line 1, where the .backdrop--stack--lg breakpoint modifier is present.

<div class="backdrop backdrop--stack--lg theme-dark">


    <div class="backdrop__image">

        <img class="opacity-50" src="https://via.placeholder.com/1500x750" alt="Placeholder" />

        <div class="backdrop__image__credit">
            <p>
                Photo by <a href="#1">Jane Doe</a> on Unsplash
            </p>
        </div>

    </div>

    <div class="backdrop__cover">

        <div class="container narrow margin-y-5">

            <div class="text-shadow text-align-center margin-bottom-4">
                <h1 class="banner-headline">
                    The mountain at a given distance<br>
                    In amber lies
                </h1>
                <p>
                    —Excerpt from <em>Delight becomes pictoral</em>
                </p>
            </div>

            <div class="grid grid--column-2--md gap-2">

                <a class="button button--outline width-100" href="#1">
                    About Emily Dickenson
                </a>

                <a class="button theme-secondary width-100 box-shadow-1" href="#1">
                    Emily Dickenson Poetry
                </a>

            </div>

        </div>

    </div>

</div>
Figure 2

All of this together makes it easy to create responsive backdrops with different flavors of color and content. What if we don't want our backdrop's size to be dictated by its feature image?


Fixed Height

Fixed height backdrops retain their height across viewport sizes. When needed, they adjust to the height of their inner content.

For a fixed height backdrop, append the .backdrop--fixed modifier to the .backdrop selector.

Photo by Jane Doe on Unsplash

The Mountain sat upon the Plain

Figure 3 gives us the HTML for the above example:

<div class="backdrop backdrop--fixed theme-dark">

    <div class="backdrop__image">
        <img class="opacity-50" src="https://via.placeholder.com/1500x750" alt="Placeholder" />

        <div class="backdrop__image__credit">
            <p>Photo by <a href="#1">Jane Doe</a> on Unsplash</p>
        </div>

    </div>

    <div class="backdrop__cover">

        <div class="container medium margin-y-4">
            <h1 class="banner-headline text-color-secondary text-shadow">
                The Mountain sat upon the Plain
            </h1>
        </div>

    </div>

</div>
Figure 3

The .backdrop--fixed selector stretches to fit the content within .backdrop__cover. Consider the following layout:

Photo by Jane Doe on Unsplash

Nature in Poetry

Featured Poem

This—is the land—the Sunset washes—

This—is the land—the Sunset washes—
These—are the Banks of the Yellow Sea—
Where it rose—or whither it rushes—
These—are the Western Mystery!

Night after Night
Her purple traffic
Strews the landing with Opal Bales—
Merchantmen—poise upon Horizons—
Dip—and vanish like Orioles!

About the Poet

Emily Dickenson

Emily Elizabeth Dickinson was an American poet. Little-known during her life, she has since been regarded as one of the most important figures in American poetry.

Dickinson was born in Amherst, Massachusetts into a prominent family with strong ties to its community.

<div class="backdrop backdrop--fixed theme-dark">

    <div class="backdrop__image">
        <img class="opacity-50" src="https://via.placeholder.com/1500x750" alt="Placeholder" />

        <div class="backdrop__image__credit">
            <p>Photo by <a href="#1">Jane Doe</a> on Unsplash</p>
        </div>

    </div>

    <div class="backdrop__cover">

        <div class="margin-y-5">

            <div class="container narrow">
                <h1 class="banner-headline text-align-center text-shadow margin-bottom-4">
                <em>Nature in Poetry</em>
                </h1>
            </div>

            <div class="container narrow medium--xl">

                <div class="grid grid--column-2--xl gap-2 justify-content-center">

                    <div class="card border-radius theme-light box-shadow-2">

                        <div class="card__head border-bottom">

                            <p>
                                <em>Featured Poem</em>
                            </p>
                        </div>

                        <div class="card__body">
                            <h2 class="h6">
                                This—is the land—the Sunset washes—
                            </h2>
                            <p>
                                <em>
                                    This—is the land—the Sunset washes—<br>
                                    These—are the Banks of the Yellow Sea—<br>
                                    Where it rose—or whither it rushes—<br>
                                    These—are the Western Mystery!
                                </em>
                            </p>
                            <p>
                                <em>
                                    Night after Night<br>
                                    Her purple traffic<br>
                                    Strews the landing with Opal Bales—<br>
                                    Merchantmen—poise upon Horizons—<br>
                                    Dip—and vanish like Orioles!
                                </em>
                            </p>
                        </div>

                        <div class="card__foot border-top">
                            <a class="button button--has-icon--disperse theme-primary" href="#1">
                                <span class="button__text">Emily Dickenson Poetry</span>
                                <span class="icon icon-arrow-right button__icon"></span>
                            </a>
                        </div>

                    </div>

                    <div class="card border-radius theme-light box-shadow-2">

                        <div class="card__head border-bottom">
                            <p>
                                <em>About the Poet</em>
                            </p>
                        </div>

                        <div class="card__body">
                            <h2 class="h4">
                                Emily Dickenson
                            </h2>
                            <p>
                                Emily Elizabeth Dickinson was an American poet. Little-known during her life, she has since been regarded as one of the most important figures in American poetry.
                            </p>
                            <p>
                                Dickinson was born in Amherst, Massachusetts into a prominent family with strong ties to its community.
                            </p>
                        </div>

                        <div class="card__foot border-top">
                            <a class="button button--has-icon--disperse theme-primary" href="#1">
                                <span class="button__text">About Emily Dickenson</span>
                                <span class="icon icon-arrow-right button__icon"></span>
                            </a>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
Figure 4

Related CSS Variables

Further customize Backdrops by redefining any of their related CSS variables as shown below.

.backdrop {
    --backdrop-fixed-height: 400px;
}