W3cubDocs

/CSS

::backdrop

The ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode. This includes both elements which have been placed in full-screen mode using the Fullscreen API and <dialog> elements.

When multiple elements have been placed into full-screen mode, the backdrop is drawn immediately beneath the frontmost such element, and on top of the older full-screen elements.

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

All full-screen elements are placed in a last-in/first out (LIFO) stack in the top layer, which is a special layer in the viewport which is always rendered last (and therefore on top) before drawing the viewport's contents to the screen. The ::backdrop pseudo-element makes it possible to obscure, style, or completely hide everything located below the element when it's the topmost one in the top layer.

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

Syntax

::backdrop

Examples

Styling the backdrop for full-screen video

In this example, the backdrop style used when a video is shifted to full-screen 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:

Note the dark grey-blue letterbox effect above and below where the backdrop is visible. Normally that area is black, but its appearance has been altered by the CSS above.

You can see this example in action or view or remix the code on Glitch.

Specifications

Specification Status Comment
Fullscreen API
The definition of '::backdrop' in that specification.
Living Standard Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
::backdrop 37
37
32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
Prefixed
12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
47 11
Prefixed
11
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
24
24
19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No
Support on dialog elements 32 79 No No 19 No
Fullscreen support No 12 — 79 47 11 No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
::backdrop 37
37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
37
37
32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
47 24
24
19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No 3.0
3.0
2.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Support on dialog elements ≤37 32 No 19 No 2.0
Fullscreen support No No 47 No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop