Adding a background to a custom page

Before you start

A quick and easy way to revitalize and modernize the look of your website is by adding a background, placing visual elements behind your blocks (text, pictures, iFrame, etc).

In this article we explain the following:

• Background options
• How can I add a background?
• Background settings

Background options

You can select between these types of backgrounds:

1. Solid color
2. Image background (with or without parallax effect)

For the latter, the parallax effect, refers to allowing the image in the background to scroll slower than the rest of the site, providing the illusion of depth.

How can I add a background?

Backgrounds can be used only on custom pages. This is not available on pages generated automatically by the software or smart pages.

To add a background, access the editing mode of one of your pages, then click on "Background" in the toolbar on the left of your page.

You can then take a background and apply it to your page, as shown below.

Background settings

Height adjustment

Backgrounds are optimized for installation under existing blocks, but you can modify the height as needed.

We recommend, however, that you adapt the height to the image you plan to use. If you add an image that is too high in relation to the background, it will be cropped.

Width adjustment

Backgrounds must have the full width of the page: you can't make your background take up half the page, for example.

However, you can choose whether the backgrounds you add have a finite or infinite width. This setting is made by going to Website > Settings and Themes and then click on the button "Choose or modify your website theme".

Now, in Advanced settings you can adapt the width:

If you opt for an infinite width, you'll get this design:

If you opt for a finite width, you will get this one (images have a finite width of 1131 pixels wide):

Color background settings

To add a color solid background to your page, choose the option "color" and select one from the available palette:

For better visibility of the elements you place on your background, be sure to maintain a sufficiently high contrast between your text/elements and your background.

Image background settings

To add an image as background, choose the option "image" and upload one from your device. You can also add a color filter and a parallax scrolling effect.

• The color filter is set to 30% as standard. This configuration cannot be changed.
• The parallax effect is a dynamic effect that will give an impression of movement to users visiting your web page. This is not visible on the editing mode (the image remains still). To see the effect, go to the user side.