Sukarelawan kami masih belum menterjemah artikel ini ke bahasa Melayu. Sertai kami dan bantu melaksanakannya!
Anda juga boleh membaca artikel ini dalam bahasa English (US).

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

Example

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 compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::backdrop
Experimental
Chrome Full support 37
Full support 37
Full support 32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Full support 47IE Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 24
Full support 24
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android Full support 37
Full support 37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 37
Full support 37
Full support 32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 47Opera Android Full support 24
Full support 24
Full support 19
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS No support NoSamsung Internet Android ?
Support on dialog elements
Experimental
Chrome Full support 32Edge No support NoFirefox No support NoIE No support NoOpera Full support 19Safari No support NoWebView Android Full support ≤37Chrome Android Full support 32Firefox Android No support NoOpera Android Full support 19Safari iOS No support NoSamsung Internet Android ?
Fullscreen support
Experimental
Chrome No support NoEdge Full support 12Firefox Full support 47IE Full support 11Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 47Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also