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).

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 32.0 webkit
37.0
(Yes)ms 47 (47) [1] 11 ms No support No support
on <dialog> 32.0 webkit
37.0
No support No support No support No support No support
on fullscreen No support (Yes)ms 47 (47) [1] 11 ms No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support (Yes)ms 47.0 (47) [1] No support No support No support
on <dialog> No support No support No support No support No support No support
on fullscreen No support (Yes)ms 47.0 (47) [1] No support No support No support

[1] See bug 1064843

See also

Document Tags and Contributors

 Last updated by: mfluehr,