One particularly useful and interesting feature in Vev is the Sticky Background section. This section component allows you to enhance your projects by adding a background image that remains fixed in position as the user scrolls down the page. This effect creates a dynamic and engaging visual experience for your visitors. In this article, we'll explore how to effectively use the Sticky Background section to elevate your designs.
☝️ Unlike a normal section, the Sticky Background section has a default height of 1500px. This extended height ensures that the background remains in view for a longer duration as users scroll, enhancing the visual impact.
Styling a Sticky Background section
Clip content: Toggle to hide the content that goes beyond the section's edges
Resize to fill vertically: Click to set the section's height to 100%
Background:
Container: Change the background of the element's container
StickyImg: Change the sticky image
Overlay: Add an overlay to the section
Opacity: Adjust the transparency of the container, sticky image, and overlay
Aspect Ratio
Specifying and locking the aspect ratio of a Sticky Background section will allow you to adjust and resize it but still maintain the overall relationship between height and width.
Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.
Organizing Sticky Background sections
Once a Sticky Background section has been added it will appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.
Select the section in the layers panel
Click and hold it
Drag it above or below the section you want