<div class="container">
  <div class="box box--landscape"></div>
  <div class="box box--square"></div>
  <div class="box box--portrait"></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="cover">cover</option>
      <option value="contain">contain</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>
    </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%, 300px);
  box-shadow: 0 0 0 2px rgb(220 11 11);
}

.box--landscape {
  aspect-ratio: 4 / 3;
}
.box--square {
  aspect-ratio: 1;
}
.box--portrait {
  aspect-ratio: 3 / 4;
}

:root {
  --background-size: auto;
  --background-origin: padding-box;
  --background-position: center;
}

.box {
  background-repeat: no-repeat;
  background-color: hsl(120 60% 20% / 0.5);
  background-position: var(--background-position), right bottom;
  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 image = document.getElementById("background-image");

const imgLandscapeSrc = `url(https://picsum.photos/1600/900?image=12)`;
const imgPortraitSrc = `url(https://picsum.photos/900/1600?image=211)`;

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

size.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);
  }
});