How to calculate how much to shift a background image based on viewport width / height

Question

I have a background image that is 6830px x 768px. I also have content that is centered in the page. The background is set to use

background-size: cover;
background-position: 0 50%;

As the user progresses through steps, the background needs to animate (scroll left to another scene in the very wide background). Each scene has been designed at 1366px x 768px. So each step needs to shift the background by 1366px when the window height is 768px. It's easy enough to animate the background into place when the viewport resolution is exactly the same, however if it is large/smaller then I need to calculate how much to shift the background. This is what I've been struggling with. What is the math needed to calculate the scroll amount based on the viewport size compared to the background size?

Answer 1

background-size: cover; will break things if, for some strange or legit reason, the height of the viewport is larger than 6830px , a small fix would be to change background-size to auto 100% ;

A solution to your issue would be to use percentages as Luke mentioned, but you have to be careful as percentages work differently when using background-position here's an elaborate article about it

There's still the issue about the varying aspect ratio of your viewport, in the perfect world it'll always be 1366:768 . You'd have to compromise either by having blank spaces or having spaces outside the viewport at the top or bottom or both. Depending on the given ratio of the viewport.

The compromise has to be made on the height because each scene is (I assume) a fixed length of 1366 pixels.

We'll start from Scene 0 and the value for the bg-pos will be 0% 50%
Consequent values of bg-x-pos will follow the formula 100% / (nx)
Where n is the total number of scenes and x is the scene number.

Example of 4 scenes

Scene 0: background-position: 0% 50%;
Scene 1: background-position: 33.333% 50%;
Scene 2: background-position: 66.666% 50%;
Scene 3: background-position: 100% 50%;

Answer 2

Thanks @Luke & @jkris for your suggestions. The issue was more complex however, but I've come up with a solution. For anyone who comes across the same problem, this function may help you:

calcBgPosition (slideNum) {
  let slideW = 1366;
  let slideH = 768;
  let winH = window.innerHeight;
  let winW = window.innerWidth;

  // Because the height determines the background scale we must multiply the width by the height scale to ensure calculations are correct
  let adjustedSlideW = slideW * (winH / slideH); 

  // In order to center the background we must first calculate the offset
  // then subtract the current slide position
  return ((winW - adjustedSlideW) / 2) - (adjustedSlideW * slideNum);
}

This use case is with a background where we have multiple scenes (slides). For best results the first and last slides (first and last portion of the background) should be bleed slides, meaning they will show portions of the background, but not be used with your content.