This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::backdrop CSS pseudo-element is a box rendered immediately below any element rendered in fullscreen mode (and above any lower elements in the stack).

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

Fullscreen elements are part of the top layer's stack, i.e., they are rendered in front of all other content. The ::backdrop pseudo-element can be used to style or hide the underlying document.

::backdrop does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element.

Syntax

::backdrop

Specifications

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

37

32 -webkit-

Yes -ms- 4711 -ms- No No
Support on dialog elements32 No No No No No
Fullscreen support No Yes4711 No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No ? Yes -ms- 47 No No ?
Support on dialog elements No ? No No No No ?
Fullscreen support No ? Yes47 No No No

See also

Document Tags and Contributors

Last updated by: ExE-Boss,