This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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). Fullscreen elements are part of the top layer's stack, i.e., they are rendered in front of all other content.
dialog::backdrop {
background: rgba(255,0,0,.25);
}
The ::backdrop pseudo-element can be used to style or hide the underlying document for an element that is displayed fullscreen.
::backdrop does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element.
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