Using the Sticky Background section
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

One particularly useful and interesting feature is the Sticky Background section, which is a section component you can use to enhance your projects with a background image that stays in a fixed position on the screen as the user scrolls down. In this article, we'll explore how to use the Sticky Background section to your advantage.

Adding a Sticky Background section

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Sticky Background

  • Select it

  • Hover over the canvas and click where it says Add section here

Styling a Sticky Background section

  • Spacing top: Add padding to the top of the Sticky Background section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Sticky Background section in pixels or % to keep spacing between sections

  • Width: The width of a Sticky Background section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a Sticky Background section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • 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'll 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

Did this answer your question?