Before you start, make sure you have:

💡 Tip: Avoid using images that contain text, as the text may be cropped or distorted on different screen sizes.

Once you add an image, additional settings that were previously unavailable will become active, including:

You can choose an image in several ways:

Once you select an image, it will automatically be added as the section background.

After adding the image, you can adjust additional settings to control how it looks.

Add a color overlay on top of the image. This can improve the contrast between the background and the content displayed over it.

Choose which part of the image should remain the main focus. This is especially useful when the image is cropped on different screen sizes.

Add a visual effect that changes how the background behaves when visitors scroll through the page.

💡 Tip: Preview or publish your website to check how the scroll effect looks.

Use screenshots or short GIFs to demonstrate:

Use generic screenshots with arrows or callouts where helpful.

Background images automatically adjust to different screen sizes, so parts of the image may be cropped.

Use the Focal Point setting to choose which part of the image should remain visible.

It's best to avoid using images that already contain text. The text may be cropped or distorted depending on the visitor's screen size.

Use the Overlay setting to add a color layer over the image and improve text contrast.

Yes. Use Scroll Effects to add a visual scrolling effect to the background image.

You can add a background image to any section and customize it using Overlay, Focal Point, and Scroll Effects.

💡 Tip: Always preview your website on both desktop and mobile to make sure the background image looks as intended.