<div class="container">
  <div class="box"></div>
</div>

<div class="form">
  <div class="control">
    <label for="background-size">background-size:</label>
    <select name="background-size" id="background-size">
      <option value="auto">auto</option>
      <option value="auto auto">auto auto</option>
      <option value="cover">cover</option>
      <option value="contain">contain</option>
      <option value="auto 75%">auto 75%</option>
      <option value="75% auto">75% auto</option>
      <option value="auto 10vw">auto 10vw</option>
      <option value="10vw auto">10vw auto</option>
      <option value="75% 25%">75% 25%</option>
      <option value="25% 75%">25% 75%</option>
      <option value="75% 200px">75% 200px</option>
      <option value="200px 75%">200px 75%</option>
      <option value="20rem 30vw">20rem 30vw</option>
    </select>
  </div>
  <div class="control">
    <label for="background-image">background-image:</label>
    <select name="background-image" id="background-image">
      <option value="Landscape">Landscape</option>
      <option value="Portrait">Portrait</option>
      <option value="Square">Square</option>
      <option value="Svg">SVG</option>
      <option value="Gradient">Gradient</option>
    </select>
  </div>
  <div class="control">
    <label for="background-repeat">background-repeat:</label>
    <select name="background-repeat" id="background-repeat">
      <option value="no-repeat">no-repeat</option>
      <option value="repeat">repeat</option>
      <option value="round">round</option>
      <option value="space">space</option>
      <option value="round no-repeat">round no-repeat</option>
      <option value="round repeat">round repeat</option>
      <option value="round round">round round</option>
      <option value="round space">round space</option>
      <option value="no-repeat round">no-repeat round</option>
      <option value="repeat round">repeat round</option>
      <option value="space round">space round</option>
    </select>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  gap: 1rem;
}

.form {
  padding: 1rem;
  background-color: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.form label {
  white-space: nowrap;
  min-width: 160px;
  text-align: right;
}

.form select {
  padding: 0.25em 0.5em;
  font-size: inherit;
  min-width: 160px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 120px;
}

.box {
  width: min(100%, 600px);
  box-shadow: 0 0 0 2px rgb(220 11 11);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  resize: both;
}

:root {
  --background-size: auto;
  --background-origin: padding-box;
  --background-position: left top;
  --background-repeat: no-repeat;
}

.box {
  background-repeat: var(--background-repeat);
  background-color: hsl(171deg 4% 50%);
  background-position: var(--background-position);
  background-origin: var(--background-origin);
  background-size: var(--background-size);
  background-image: var(--image);
}

const rootElement = document.documentElement;
const size = document.getElementById("background-size");
const repeat = document.getElementById("background-repeat");
const image = document.getElementById("background-image");

const imgLandscapeSrc = `url(https://picsum.photos/1600/900?random=1)`;
const imgPortraitSrc = `url(https://picsum.photos/900/1600?random=2)`;
const imgSquareSrc = `url(https://picsum.photos/200/200?random=3)`;
const imgSvg = `url(https://www.w3cplus.com/sites/default/files/blogs/2022/2208/avatar.svg)`;
const Gradient = `linear-gradient(to bottom, #09f, #f90, #09a)`;

rootElement.style.setProperty("--image", imgLandscapeSrc);

[size, repeat].forEach((select) => {
  select.addEventListener("change", (etv) => {
    rootElement.style.setProperty(`--${etv.target.id}`, etv.target.value);
  });
});

image.addEventListener("change", (etv) => {
  if (etv.target.value === "Landscape") {
    rootElement.style.setProperty("--image", imgLandscapeSrc);
  } else if (etv.target.value === "Portrait") {
    rootElement.style.setProperty("--image", imgPortraitSrc);
  } else if (etv.target.value === "Square") {
    rootElement.style.setProperty("--image", imgSquareSrc);
  } else if (etv.target.value === "Svg") {
    rootElement.style.setProperty("--image", imgSvg);
  } else if (etv.target.value === "Gradient") {
    rootElement.style.setProperty("--image", Gradient);
  }
});