<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://source.unsplash.com/600x400/?iran" alt="">

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) {
  } else {

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.