# backdrop pseudo-element

The `backdrop` pseudo-element positions a specified element below the very first element along the Z-axis, but above the remaining elements. Often this pseudo-element is used to darken the background of the page on which modal windows are displayed. Currently, the `backdrop` pseudo-element only works with modal windows that were created using the `<dialog>` element.

## Syntax

`selector::backdrop { background: page background color; }`

## Example

Let's make sure that when the button is clicked, a modal window opens, and the page background is darkened:

`<button id="open">Open</button> <dialog> <form method="dialog"> <p>Text text text</p> <button id="close">Close</button> </form> </dialog>` `body{ height: 200px; } dialog { width: 200px; } dialog::backdrop { background-color: grey; }` `let elem = document.querySelector('dialog'); let openBtn = document.querySelector('#open'); let closeBtn = document.querySelector('#close'); openBtn.addEventListener('click', () => elem.showModal());`

:

## See also

- the `bottom` property
  that specifies a position of an element bottom edge
- the `top` property
  that specifies a position of an element top edge
- the `left` property
  that specifies a position of an element left edge
- the `right` property
  that specifies a position of an element right edge

← →
↑
en ru