<div class="container">
  <div class="top"></div>
  <div class="left"></div>
</div>

<div class="actions">
  <div class="control">
    <label for="position-x">background-position-x:</label>
    <input type="range" id="position-x" name="position" min="-100" max="100" step="5" value="0" />
    <span id="output__x--per"></span>
    <span id="output__x--pix"></span>
  </div>
  <div class="control">
    <label for="position-y">background-position-y:</label>
    <input type="range" id="position-y" name="position" min="-100" max="100" step="5" value="0" />
    <span id="output__y--per"></span>
    <span id="output__y--pix"></span>
  </div>
</div>

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2008/css-percentage-unit-14.png" alt="">

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

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

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 100%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-blend-mode: hue;
}

.container {
  width: 500px;
  height: 300px;
  display: flex;
  position: relative;
  box-shadow: 0 0 0 1px #f36;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.container::before {
  content: "width: 500px";
  position: absolute;
  bottom: 100%;
  right: 0;
}

.container::after {
  content: "height: 300px";
  position: absolute;
  left: 100%;
  top: 50%;
  white-space: nowrap;
  transform: translate(-40%, -50%) rotate(90deg);
}

.actions {
  padding: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  font-size: 1.5rem;
  margin-top: auto;
}

.control {
  margin: 0 5px;
}

:root {
  --position-x: 0;
  --position-y: 0;
}

.container {
  background: url("//www.w3cplus.com/sites/default/files/blogs/2020/2008/css-percentage-unit-14.png")
    no-repeat;
  background-position: var(--position-x) var(--position-y);
}

img {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.top {
  position: absolute;
  top: var(--position-y);
  left: -50px;
  right: -50px;
  height: 0;
  border-top: 1px dashed #0f9;
  z-index: 2;
}

.left {
  position: absolute;
  left: var(--position-x);
  top: -50px;
  bottom: -50px;
  width: 0;
  border-left: 1px dashed #0f9;
  z-index: 2;
}

const containerElement = document.querySelector(".container");
const imgElement = document.querySelector("img");

const containerElementWidth = containerElement.getBoundingClientRect().width;
const containerElementHeight = containerElement.getBoundingClientRect().height;

const imgElementWidth = imgElement.naturalWidth;
const imgElementHeight = imgElement.naturalHeight;

const xRange = document.getElementById("position-x");
const yRange = document.getElementById("position-y");

const outputXPer = document.getElementById("output__x--per");
const outputXPix = document.getElementById("output__x--pix");

const outputYPer = document.getElementById("output__y--per");
const outputYPix = document.getElementById("output__y--pix");

const xRangeValue = xRange.value;
const yRangeValue = yRange.value;

outputXPer.textContent = `${xRangeValue}%`;
outputYPer.textContent = `${yRangeValue}%`;

const outputXPixValue =
  ((containerElementWidth - imgElementWidth) * xRangeValue) / 100;
const outputYPixValue =
  ((containerElementHeight - imgElementHeight) * yRangeValue) / 100;

outputXPix.textContent = `(${outputXPixValue}px)`;
outputYPix.textContent = `(${outputYPixValue}px)`;

const rootElement = document.documentElement;

xRange.addEventListener("change", (etv) => {
  const rangeValue = etv.target.value;
  const outputXPixValue =
    ((containerElementWidth - imgElementWidth) * rangeValue) / 100;
  rootElement.style.setProperty("--position-x", `${rangeValue}%`);
  outputXPer.textContent = `${rangeValue}%`;
  outputXPix.textContent = `(${outputXPixValue}px)`;
});

yRange.addEventListener("change", (etv) => {
  const rangeValue = etv.target.value;
  const outputYPixValue =
    ((containerElementHeight - imgElementHeight) * rangeValue) / 100;
  rootElement.style.setProperty("--position-y", `${rangeValue}%`);

  outputYPer.textContent = `${rangeValue}%`;
  outputYPix.textContent = `(${outputYPixValue}px)`;
});