::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:
- Elements which have been placed in fullscreen mode using the Fullscreen API
Element.requestFullscreen()
method. <dialog>
elements that have been shown in the top layer via aHTMLDialogElement.showModal()
call.- Popover elements that have been shown in the top layer via a
HTMLElement.showPopover()
call.
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:
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
:fullscreen
pseudo-class<dialog>
HTML element- Fullscreen API
- Popover API