How do I add a background to a custom page?

The Backgrounds feature in the Website app lets you add a solid color or image background behind one or more blocks on a custom page (a page you build yourself).

• What types of backgrounds can I use?
• Which pages can I use a background on?
• How do I add a background to my page?
• How do I set the height of my background?
• How wide can a background be?
• How do I set up a color background?
• How do I set up an image background?
• What are the known limitations of backgrounds?

The Backgrounds feature doesn't apply to pages generated automatically by the software (blog, gallery, etc.).

What types of backgrounds can I use?

You can use two types of backgrounds:

• A color background: a solid color behind one or more blocks.
• An image background: a background image, with:
  • a color filter automatically applied at 30% (can't be changed);
  • optionally, a parallax effect.

What is the parallax effect?

The parallax effect makes the background image scroll more slowly than the rest of the page. This difference in speed creates a sense of depth. Don't confuse it with a carousel:

• A carousel cycles through several images, often at the top of the page.
• The parallax effect applies to a single background image, which scrolls at a different speed than the rest of the page.

Which pages can I use a background on?

Backgrounds are only available on custom pages, meaning the pages you create and edit freely.

Backgrounds aren't available on pages generated automatically by certain modules of the software.

How do I add a background to my page?

1. Open the editor for the custom page in the Website app.
2. Click Backgrounds in the toolbar on the left of the page.
3. Choose the background type: Color or Image.
4. Drop the background where you want it, above or below your blocks.

The background appears behind the relevant blocks in the page editor.

How do I set the height of my background?

A background's height is up to you: you can resize it as needed.

How wide can a background be?

Can a background cover only part of the page, like a card?

No. A background always spans the full width of the page, based on the setting chosen in the theme. You can't limit its width to create a card with a partial color background.

What's the difference between fixed width and full width?

• Full width: the background spans the entire visible width of the screen (responsive display).
• Fixed width: the background is framed at a fixed width of 1131 px, centered on the page, with visible margins on large screens.

You set this in the theme settings: open Website > General, then click Edit theme to reach the theme settings page.

Example of full-width rendering:

Example of fixed-width rendering:

1. Click Backgrounds, then choose a color background.
2. Select the color you want.

How do I set up a color background?

1. Click Backgrounds, then choose a color background.
2. Select the color you want.
3. Check the contrast between the background and the text or elements placed on it.

The color you chose appears behind the blocks placed on the background.

1. Click Backgrounds, then choose an image background.
2. Upload or select the image.
3. Turn on the parallax effect if you want.

The color filter is automatically applied at 30%: this setting can't be changed.

How do I set up an image background?

1. Click Backgrounds, then choose an image background.
2. Upload or select the image.
3. The color filter is applied at 30% by default: this setting can't be changed.
4. Turn the parallax effect on or off.

The image appears behind the blocks, with its 30% color filter.

Why doesn't the parallax effect show in the editor?

The parallax effect isn't visible in the editor: the image looks static. The parallax effect shows on the published page, on the visitor side.

What are the known limitations of backgrounds?

• On mobile, background images with the parallax effect are cut off on the sides. To limit this cropping, use a portrait or square image at least 1920 px wide and group your blocks.
• A background always spans the full width of the page: you can't create a color background covering only part of the page, like a card.