Use percentage with background position

Question

I have an image like you can see below and I want to set the Images Background position for different percentage values (0%, 25%, 50%, ...).

---> Like for example I want to call a function with myfunction(50%) and the Images-background should move about 50% to the left.

Please have a look at my code:

function call(value) {
  document.getElementById("img").style.backgroundPositionX = -value + "px"
}

#img {
       position: fixed;
       left: 0%;
       width: 100%;
       height: 20%;
       top: 0%;
       background:url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
            background-size:cover;
    }

<div id="img"><br></div>

<br><br><br>
<input type="text" oninput="call(this.value)"/>

My idea was to set the to a percent value (in this case "50%")

elem.backgroundPositionX = "50%"

...but is doesn't seems working this way!

I have no clue how to fix this problem. I don't want to use px-values. I want to set the position in percentage.

Any help would be very appreciated. Thanks in advance.

Temani Afif · Accepted Answer · 2019-11-22T12:15:45.303

You can do some calculation in order to convert the % value to pixel if you want to consider the % relative to width of the container (or the width of the initial image or any other value).

You can try this:

function call(value) {
  var w = document.getElementById("img").offsetWidth;
  var v = (value * w)/100 
  document.getElementById("img").style.backgroundPositionX = -v + "px";
}

#img {
  width: 400px;
  height: 50px;
  background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
  background-size: cover;
}

input {
  margin-top:50px;
}

<div id="img"></div>
<input type="text" oninput="call(this.value)" >

As a side note, percentage value with background position doesn't work like pixel value. 0% means the element is placed on the left (left edge of the image is placed on the left edge of container) and 100% means that the element is on the right (the right edge of the image is placed on the right edge of container). Since you are using cover with background size, you should increase value in order to move the image to the left so you have to consider positive value if you want to use percentage.

Check below to see behavior of px vs %:

#img {
  width: 400px;
  height: 50px;
  background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
  background-size: cover;
  
  animation:anime 5s alternate infinite linear;
}
#img1 {
  margin-top:20px;
  width: 400px;
  height: 50px;
  background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
  background-size: cover;
  
  animation:anime 5s alternate infinite linear;
}


@keyframes anime {
  from {
    background-position-x:0%
  }
  to {
    background-position-x:100%
  }

}
@keyframes anime1 {
  from {
    background-position-x:0px
  }
  to {
    background-position-x:-400px
  }

}

<div id="img"></div>
<div id="img1"></div>

Related question to get more details: Using percentage values with background-position on a linear gradient

Use percentage with background position

1 Answers1