We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.

Skip to content
PatternFly logo

Backdrop

A backdrop is used to screen the main content of a page when a modal overlay is opened. It prevents the user from doing other work on the page until the modal is dismissed.

Examples

Basic

Basic screenshot

Documentation

Overview

This component puts a backdrop over the entire viewport.

Usage

Class
Applied to
Outcome
.pf-c-backdrop
<div>
Initiates backdrop. Required
.pf-c-backdrop__open
<body>
Lock scrolling when backdrop is active. This class should be set on <body> while backdrop is active and removed while backdrop is inactive. Required

CSS variables

.pf-c-backdrop--pf-c-backdrop--Position
fixed
.pf-c-backdrop--pf-c-backdrop--ZIndex
400
.pf-c-backdrop--pf-c-backdrop--BackgroundColor
rgba(#030303, .62)

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines