Background Image and Video Effects
Enhance background images and videos with color overlays, gradients, scroll effects, and parallax animations, all optimized for fast loading.
In YOOtheme Pro, you can add color and scroll effects to section and column background images directly in the page builder. Blend images into any background color for a more artistic look, or add a transparent overlay color or gradient to soften the image and improve contrast. You can even animate the overlay opacity on scroll to create smooth transitions, for example by gradually fading a background to black.
The same effects are available for background videos, so you can style and animate them just like background images.
Background images can also respond to scrolling. Fix the background to the viewport so it stays in place while the page moves, or animate its horizontal and vertical position on scroll to create a smooth parallax effect. Adjust the easing and define exactly when the scroll animation should start and end.
To keep everything fast, YOOtheme Pro lazy-loads background images and videos and automatically generates srcset images for different device resolutions. This significantly improves loading times, especially when working with large visual backgrounds.
