::backdrop

The ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer. This includes:

When multiple elements have been placed into the top layer, each one has its own ::backdrop pseudo-element.

css

/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

Elements are placed in a last-in/first out (LIFO) stack in the top layer. The ::backdrop pseudo-element makes it possible to obscure, style, or completely hide everything located below a top layer element.

::backdrop neither inherits from nor is inherited by any other elements. No restrictions are made on what properties apply to this pseudo-element.

Syntax

css

::backdrop {
  /* ... */
}

Examples

Styling the backdrop for fullscreen video

In this example, the backdrop style used when a video is shifted to fullscreen mode is configured to be a grey-blue color rather than the black it defaults to in most browsers.

css

video::backdrop {
  background-color: #448;
}

The resulting screen looks like this:

An almost full-screen video player with purple above and below the player as the video player doesn't completely fill the screen.

See this example in action, after changing the color of the background cause the video to go fullscreen to see the change to the backdrop color.

Specifications

Specification
CSS Positioned Layout Module Level 4
# backdrop

Browser compatibility

BCD tables only load in the browser

See also