<div class="container">
  <p>When the image goes to fullscreen mode it doesn't cover the entire viewport therefore the backdrop is visible and we can style it:</p>

  <button>Toggle Fullscreen</button>
  
  <img src="https://picsum.photos/600/400" alt="">

</div>

img {
  display: block;
  max-width: 100%;
  margin: 2rem 0;
}

img::backdrop {
  background: conic-gradient(red, orange, yellow, green, blue);
  animation: move 5s infinite linear paused both;
}

img:hover::backdrop {
  animation-play-state: running;
}

@keyframes move {
  50% {
    transform: scale(.9);
  }  
}






html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 100%/1.7 system-ui;
  background-color: #1b1b1b;
  color: #eee;
}

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem;
}

button {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  font-family: inherit;
  display: inline-block;
  text-align: center;
  user-select: none;
  border: 1px solid #007bff;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  color: #fff;
  background-color: #007bff;
  cursor: pointer;
}


@supports not selector(::backdrop) {

  body::before {    
    box-sizing: border-box;
    content: "⚠️ Your browser doesn't support ::backdrop";
    display: block;
    max-width: 72rem;
    margin: auto;
    color: #f44336;
    font-weight: bold;
    padding: 2rem 2rem 0;
  }
}

let fullscreen = document.querySelector("img");
let button = document.querySelector("button");

button.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    fullscreen?.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});