<div class="box">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, temporibus, aut officia minus sequi quae molestias beatae, qui ipsa mollitia alias accusamus voluptate ratione provident numquam iure quia aliquam tempore possimus consequatur vel. Iure atque enim in?</p>
</div>

<div class="form">

  <label for="background-origin">background-origin:</label>
  <select name="background-origin" id="background-origin">
    <option value="padding-box">padding-box</option>
    <option value="border-box">border-box</option>
    <option value="content-box">content-box</option>
  </select>
  <label for="background-position">background-position:</label>
  <select name="background-position" id="background-position">
    <option value="left 0 top 0">left 0 top 0</option>
    <option value="left 0 bottom 0">left 0 bottom 0</option>
    <option value="right 0 top 0">right 0 top 0</option>
    <option value="right 0 bottom 0">right 0 bottom 0</option>

    <option value="0 0">0 0</option>
    <option value="40px 40px">40px 40px</option>
    <option value="left 40px top 40px">left 40px top 40px</option>
    <option value="right 40px top 40px">right 40px top 40px</option>
    <option value="left 40px bottom 40px">left 40px bottom 40px</option>
    <option value="right 40px bottom 40px">right 40px bottom 40px</option>
    <option value="40% 40%">40% 40%</option>
    <option value="left 40% top 40%">left 40% top 40%</option>
    <option value="right 40% top 40%">right 40% top 40%</option>
    <option value="left 40% bottom 40%">left 40% bottom 40%</option>
    <option value="right 40% bottom 40%">right 40% bottom 40%</option>
  </select>
</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: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.box {
  width: min(100%, 600px);
  background-color: #fff;
  box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
  border: 3rem solid rgb(220 20 20 / 38%);
  padding: 3rem;
  display: flex;
  align-items: stretch;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(34 190 120 / 0.6);
  z-index: 1;
}

:root {
  --origin: padding-box;
  --position: 0 0;
}

.box {
  background: #fff
    url("//www.w3cplus.com/sites/default/files/blogs/2022/2207/avatar.svg") left
    top / 100px 100px no-repeat;
  background-origin: var(--origin);
  background-position: var(--position);
}

.box p {
  background-color: rgb(129 133 151 / 67%);
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 0.025em;
  padding: 10px;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 50%);
  z-index: 2;
}

.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;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.form select {
  padding: 0.25em 0.5em;
  font-size: inherit;
}

const rootElement = document.documentElement;
const originHander = document.getElementById("background-origin");
const positionHander = document.getElementById("background-position");

originHander.addEventListener("change", (etv) => {
  rootElement.style.setProperty("--origin", etv.target.value);
});

positionHander.addEventListener("change", (etv) => {
  rootElement.style.setProperty("--position", etv.target.value);
});