I may have implemented this incorrectly but I am having an issue making the code work with full-width images in a responsive site. As the browser window is made narrower we reach a point at which the image inside the .rellax div, set at 100% width, is no longer tall enough to offer coverage throughout the scroll. The result is white space above and below.
Page refresh (to re-load rellax) doesn't solve this, so even assuming a static browser width in each use case this still isn't working.
The issue can be seen at this dev site, where two full-width parallax scrolling images break the page up as you scroll down. Pull the browser width low enough and the gaps can be seen on scroll (at a height of 940px i'm starting to see white space from a width of around 960px). The code is as follows (with HTML as per the example given in the documentation):
The issue seems to be the width: 100%; styling, although removing this renders the image at full size regardless of viewport dimensions, so the small er we get, the less we see. I have tried the following CSS instead:
.rellax img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
... which would give the framing i'm after on a static image. Is there a setting which effectively recreates this with the parallax scroll in there?
I may have implemented this incorrectly but I am having an issue making the code work with full-width images in a responsive site. As the browser window is made narrower we reach a point at which the image inside the .rellax div, set at 100% width, is no longer tall enough to offer coverage throughout the scroll. The result is white space above and below.
Page refresh (to re-load rellax) doesn't solve this, so even assuming a static browser width in each use case this still isn't working.
The issue can be seen at this dev site, where two full-width parallax scrolling images break the page up as you scroll down. Pull the browser width low enough and the gaps can be seen on scroll (at a height of 940px i'm starting to see white space from a width of around 960px). The code is as follows (with HTML as per the example given in the documentation):
CSS
.rellax { z-index: -100; height: 450px; overflow: hidden; }.rellax img { width: 100%; height: auto; }JSvar rellax = new Rellax('.rellax', { speed: -2, center: true, });The issue seems to be the
width: 100%;styling, although removing this renders the image at full size regardless of viewport dimensions, so the small er we get, the less we see. I have tried the following CSS instead:.rellax img { width: 100%; height: 100%; object-fit: cover; object-position: center; }... which would give the framing i'm after on a static image. Is there a setting which effectively recreates this with the parallax scroll in there?