Бесконечный скролл фона

176

26 июня 2018, 16:30

Как можно сделать бесконечный скролл фона при этом не теряя гибкости процентных величин?

Сей блок должен быть 20% высоты от экрана и на разных устройствах будет иметь разный размер. Фон должен под него подстраиваться и быть процентно одинакового размера среди всех устройств.

Я создал это и еще 20 прототипов на которых фон прыгает ибо проценты высчитываются относительно всего блока(так есть ширины экрана), а не размера картинки фона. Вариант с статической величиной (например: background-size: 300px) не подходит ибо на телефонах блок будет массивным, может кто посоветует что можно сделать?

html, body { 
  height: 100%; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
} 
body div { 
  height: 40%; /*изменил на 40% для сего примера*/ 
  width: 100%; 
  background: url('https://st2.depositphotos.com//3547923/7384/v/450/depositphotos_73845815-stock-illustration-cartoon-nature-wild-west-landscape.jpg'); 
  background-repeat: repeat-x; 
  background-size: contain; 
  background-position: bottom left; 
  animation: slide 3s linear infinite; 
} 
 
@keyframes slide{ 
  0%{ 
    background-position: bottom right; 
  } 
  100%{ 
    background-position: bottom left; 
  } 
}

<div></div>

Answer 1

В общем если никто не знает варианта получше придется делать через скрипт, а это будет мучительно...

  const windowW = window.innerWidth;
  const windowH = window.innerHeight;
  const imageW = 450;
  const imageH = 227;
  const blockH = windowH * 20 / 100;
  const blockW = windowW;
  const newImgH = blockH;
  const newImgW = imageW / (imageH/blockH);
  const newBlockW = (Math.ceil(windowW / newImgW))*newImgW;