CSS - Pseudo-element - ::backdrop

The ::backdrop pseudo-element in CSS is used to create a backdrop that entirely covers the viewport and is displayed or rendered immediately below a <dialog> or an element that enters fullscreen mode or are on the top layer.

The effect of this pseudo-element can be seen in the following scenarios:

  • All the elements that are placed in fullscreen mode.

  • All the <dialog> elements that are rendered in the top layer.

  • All the popover elements that are rendered in the top layer.

Overview

  • In case of multiple elements placed into the top layer, each element has its own ::backdrop pseudo-element.

  • The ::backdrop pseudo-element has the ability to conceal, style or make everything completely hidden below the top layer element.

  • The ::backdrop pseudo-element can not be inherited from or by any other element.

  • There are no restrictions made on any or all properties that apply on this pseudo-element.

Syntax

selector::backdrop {
   /* ... */
}

CSS ::backdrop Example

Here is an example showing usage of ::backdrop pseudo-element on a <dialog> element:

<html>
<head>
<style>
    dialog::backdrop {
        background-image: url("images/border.png");
    }

    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: #3d3e3e;
        color: white;
    }
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 2rem;
    }
    button {
        display: inline-block;
        border: 1px solid #007bff;
        padding: 5px;
        font-size: 1rem;
        color: black;
        background-color: #bfc2c5;
        cursor: pointer;
    }
    @supports not selector(::backdrop) {
        body::before {    
        box-sizing: border-box;
        content: '';
        }
    }
</style>
</head>
<body>
    <div class="container">
        <p>pseudo-element backdrop used to create a background</p>
        <button onclick="openDialog()">Click to Open dialog</button>
        <dialog>
            <p>See the backdrop</p>
            <button onclick="closeDialog()">Close</button>
        </dialog>  
    </div>
    <script>
        var dialog = document.querySelector('dialog');
        function openDialog() {  
        dialog.showModal();
        }
        function closeDialog() {  
        dialog.close();
        }
    </script>
</body>
</html>
Advertisements