Parallax background performance and behavior

Parallax background performance and behavior

So far I've created a horizontally-scrolling site that has parallax
effects on element background images (which are stretched to fit the size
of the viewport). I've used the Stellar.js library to achieve the effect;
$.stellar({
horizontalScrolling: true,
verticalScrolling: false,
horizontalOffset: $(window).width()
});
However, two problems I'm facing;
The images tend to 'run out' before the the element has fully disappeared;
showing the white background underneath. The severity of this effect
depends on the size and shape of the viewport, so I'm guessing trying to
figure out the math involved for image size, aspect ratio or the defined
scroll ratios isn't worth it. Is there a way to make the scroll ratio
"automatic" within Stellar, so that the background never 'runs out' (or is
there an alternative parallax library that does that)?
The performance of the effect is miserable regardless of browser and
machine. Removing background-size: cover seems to improve things somewhat,
but not "enough"; would using img elements improve the performance over
background images? It's a huge change and a messy way of doing it, but it
would be worth it if it fixes the laggy scrolling.
Thanks in advance!