I've got a little issue with parallax-backgrounds in my project. I am using stellar.js because it seemed easy enough to use. Now I am running into some issues concerning the height of the background-images.
You can see the current issue here: http://flyn.xyz/ if you scroll down a little further towards the parallax-scrolling background with the Overwatch-character.
Here's the html:
<div class="hero hero-inline" data-stellar-background-ratio="0.5" style="background-image:url(\' '. esc_attr($image) .' \');"></div>
And here's the css:
.hero {
width:100%;
background-color:black;
overflow:hidden;
background-origin:content-box;
background-position:center;
background-size:cover;
height:400px;
}
The result is rather nice when I'm in fullscreen on my desktop (1920x1080 or 1600x900); but once I resize the window the parallax-effect scrolls the background-image "too much" and it goes "out of bounds" vertically: Example
I tried a few things but can't solve this - how do I get to a usable solution? Other sites simply don't resize the background-image horizontally when the browser width goes smaller to circumvent the issue but I couldn't figure out how to make that happen.
Glad for any suggestions, Flo
