{"id":345532,"date":"2021-08-03T06:42:39","date_gmt":"2021-08-03T13:42:39","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=345532"},"modified":"2024-06-12T08:53:01","modified_gmt":"2024-06-12T15:53:01","slug":"backdrop","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/backdrop\/","title":{"rendered":"::backdrop"},"content":{"rendered":"\n

The ::backdrop<\/code> CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog><\/code>, an element with the popup<\/code> attribute, or any element that enters fullscreen mode using the Fullscreen API<\/a>.<\/p>\n\n\n\n

dialog::backdrop {\n  background-color: darkorange;\n}\n<\/code><\/pre>\n\n\n\n
\"\"
The backdrop is selectable as a pseudo-element when an element is opened in the browser\u2019s fullscreen mode.<\/figcaption><\/figure>\n\n\n\n
Bottom line:<\/strong> we get something to hook into for styling the full background behind elements when the browser is in fullscreen mode. And when we say “fullscreen mode” what we’re talking about is the browser taking up the entire screen of a monitor \u2014 not to be confused with the browser viewport. Often, fullscreen mode is triggered by an option in the operating system to expand a window.<\/p>\n\n\n\n
\"Showing
MacOS provides an option in the UI of a window to expand that window to fullscreen.<\/figcaption><\/figure>\n\n\n\n
::backdrop<\/code> does not inherit from any element and is not inherited from. So, there\u2019s no cascade happening where you might run into a conflict between the backdrops of two elements.<\/p>\n\n\n
Styling the backdrop of a dialog<\/h3>\n\n\n
Consider the following <dialog><\/code> element in HTML:<\/p>\n\n\n\n
<dialog>\n  <h2>I'm a dialog window<\/h2>\n  <button onclick=\"closeDialog()\">Close<\/button>\n<\/dialog>  \n\n<button onclick=\"openDialog()\">Open dialog<\/button><\/code><\/pre>\n\n\n\n
::backdrop<\/code> can be used to style behind a <dialog><\/code> when the dialog is displayed with HTMLDialogElement.showModal()<\/code><\/a>, which is currently experimental, but is what provides the ::backdrop<\/code>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
var dialog = document.querySelector('dialog');\nfunction openDialog() {  \n  dialog.showModal();\n}\nfunction closeDialog() {  \n  dialog.close();\n}\n<\/code><\/pre>\n\n\n\n
Now, if we click on the button and open the dialog, the following CSS works:<\/p>\n\n\n\n
dialog::backdrop {\n  background-color: darkorange;\n  background-image: linear-gradient(\n    130deg,#ff7a18,\n    #af002d 41.07%,\n    #319197 76.05%\n  );\n}\n<\/code><\/pre>\n\n\n\n
Open the <dialog><\/code> element in the following demo and see the style that we applied to dialog\u2019s backdrop:<\/p>\n\n\n\n