Overlay - Style Editor

The overlay option enables you to apply a color or image as a background to an element.

To apply overlay:

Click the Element on your website to which you want to add an overlay.
Click the settings icon on your chosen element and navigate to the Style Editor section
Expand Background. To edit the overlay of the selected element, under the Background Type dropdown, choose Background image.
To upload a background image: Click Change Image to add a different image to the background of the element.

You can adjust the position, size, alignment, and attachment of the background by clicking on the respective dropdowns.

Select the attachment as per your requirement:

Fixed: The background image will be fixed while the elements move while scrolling.
Scroll: The background image will scroll along with the other elements.
Scroll down to Overlay Type and choose Single color and Linear gradient. Compared to a single color, a linear gradient shows the linear transition from one color to another.

If you choose the single color option, you can choose a color to be applied to the background.

If you want to have a linear gradient effect, choose two colors to fill in Overlay color 1 and Overlay color 2. Choose the Overlay Direction to determine how you want the colors to transition.