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.
::backdrop
| Specification | Status | Comment |
|---|---|---|
| Fullscreen API The definition of '::backdrop' in that specification. | Living Standard | Initial definition. |
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support |
37 32 -webkit- |
Yes -ms- | 47 | 11 -ms- | No | No |
Support on dialog elements |
32 | No | No | No | No | No |
| Fullscreen support | No | Yes | 47 | 11 | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | No | ? | Yes -ms- | 47 | No | No | ? |
Support on dialog elements |
No | ? | No | No | No | No | ? |
| Fullscreen support | No | ? | Yes | 47 | No | No | ? |
:fullscreen pseudo-class<dialog> HTML element
© 2005–2018 Mozilla Developer Network 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