Why does checking the "parallax" box on a full-width row cause the image to stretch 30% or so beyond the page edges?
The linked test page shows the same image as a full-width background, then with that same element duplicated and made Parallax, and then as a simple single image. The non-parallax images grow to their container, but not beyond. The Parallax element goes beyond the container.
This is a side effect of the css rule "background-position: fixed" If you want to confirm this quickly, comment out this rule in the style.css stylesheet:
Because fixed backgrounds have to grow a lot larger extra zooming can occur depending on what size image you're supplying. For fixed backgrounds such as this, it would be best to supply taller images (around 1000px) to avoid this :)
Cheers
Why does checking the "parallax" box on a full-width row cause the image to stretch 30% or so beyond the page edges?
The linked test page shows the same image as a full-width background, then with that same element duplicated and made Parallax, and then as a simple single image. The non-parallax images grow to their container, but not beyond. The Parallax element goes beyond the container.
(The test image is 1400px wide)
thank you
Hey Lee!
This is a side effect of the css rule "background-position: fixed" If you want to confirm this quickly, comment out this rule in the style.css stylesheet:
.full-width-section.parallax_section, .full-width-content.parallax_section { background-attachment: fixed; }Because fixed backgrounds have to grow a lot larger extra zooming can occur depending on what size image you're supplying. For fixed backgrounds such as this, it would be best to supply taller images (around 1000px) to avoid this :) Cheers