| title | slug | page-type | browser-compat |
|---|---|---|---|
::backdrop |
Web/CSS/::backdrop |
css-pseudo-element |
css.selectors.backdrop |
{{CSSRef}}
The ::backdrop CSS pseudo-element is a box the size of the {{Glossary("viewport")}}, which is rendered immediately beneath any element being presented in the {{glossary("top layer")}}.
{{EmbedInteractiveExample("pages/tabbed/pseudo-element-backdrop.html", "tabbed-shorter")}}
::backdrop {
/* ... */
}Backdrops appear in the following instances:
- Elements which have been placed in fullscreen mode using the Fullscreen API {{domxref("Element.requestFullscreen()")}} method.
- {{HTMLElement("dialog")}} elements that have been shown in the top layer via a {{domxref("HTMLDialogElement.showModal()")}} call.
- {{domxref("Popover API", "Popover", "", "nocode")}} elements that have been shown in the top layer via a {{domxref("HTMLElement.showPopover()")}} call.
When multiple elements have been placed into the top layer, each one has its own ::backdrop pseudo-element.
/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
background: rgb(255 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.
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.
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}}
{{Compat}}
- {{cssxref(":fullscreen")}} pseudo-class
- {{HTMLElement("dialog")}} HTML element
- Fullscreen API
popoverHTML global attribute- Popover API