`::backdrop` - Selector CSS

::backdrop

Summary of characteristics of the `::backdrop` selector

Quick description

A pseudo-element targeting the element added by browsers behind dialog boxes or elements displayed in full screen.

Status

Standard

Predefined values

dialog | fullscreen

W3C Module

Selectors

`::backdrop` pseudo-element - Description.

When an element is displayed in full screen or modal (dialog), the browser inserts an opaque element behind it as large as the viewport. This is to hide the page behind it. The ::backdrop pseudo-element targets this browser-added element.

Careful! We are talking about elements of the page displayed in full screen, and not about the browser window (which can pass in full screen by pressing the F11 key on Windows or Mac Intosh CMD key +F on MacIntosh).

Displaying in full screen or opening a dialog box is generally done by Javascript code, of which the following An example below:


	function fullScreen(element) {
	   element.requestFullscreen();
	}
	function openDialog(element) {
		element.showModal();
	}
	function closeDialog(element) {
		element.close();
	}

See also the page on the :fullscreen pseudo-class, which targets elements displayed in full screen.

`::backdrop` pseudo-element - Examples of use.

A click on the image below displays it in full screen (the esc key restores it to its original size). The ::backdrop pseudo-element has been used to set the background behind the image when it is displayed in full screen.

Example with the pseudo-element ::backdrop

This second example concerns a dialog box (HTML dialog tag) that can be displayed in modal by the . Styles applied to the ::backdrop pseudo-element fade the page in the background.

`::backdrop` pseudo-element - Browser compatibility.

The ::backdrop pseudo-element is correctly recognized by browsers.

Column 1

Support for the pseudo-element ::backdrop that targets the element intended to partially or fully obscure the page when an element is displayed in fullscreen.