Ask a Question ?
Design & Publish Websites Faster

How to Set a Full Page Website Background

Page Background

The Full Page Website Background feature allows you to set a color or an image for the background of your whole page. It will stretch behind all your blocks. It’s amazing! You can now use a single image as the background for the full height of your page!

A screenshot of a page with arrows pointing at blocks

A page background spans across and behind all blocks

It may help to see a cross-section of the above sample in 3d:

Cross section of a sample page

In this screenshot we can clearly see how containers stack on top of the page

How to use it

You’ll find a link to the page background panel in every block’s style dot.

Style Dot for the footer block

All style dots for blocks contain the button to edit current page background

Click it and it will open the styles for that block.

Block style dot with the edit page background button

Click on “Edit” to access the options for the page background

Then you’ll be presented with the actual options for your page background.

Options for the page background

This is how the panel for editing your page background looks

Let’s go over each option.

  1. Background Color. It allows you to select a solid color for the background.
  2. Background Image. You can either select a pre-designed one, or upload your own image.
  3. Blend Image with Background Color. If you increase the percentage of this option, your background image will be blended with the solid color you choose on the first step (option). Maximum available is 75%.
  4. Force Transparency on the Blocks Below. Checking each of this boxes is equivalent to turning off a background for each block. If you “force transparency” in any of them, you’ll be able to “see through”, straight to the page background.
  5. Gradient. Currently, a gradient means that current color will fade to black.
  6. Drop Shadow. It generates an inner shadow on the edges of the page.

Background Image Options

If you select a background image for your background, you’ll notice another panel appearing on the right.

Background image options

If you check the “Background Image” box, you can edit its options in a new panel

This panel will let you select an image from the available. There are tons of pre-designed to help you get started. But if you have designed a custom background, you can click on “+Custom Image” and upload your own! Just select one from your computer.

Then there’s the “repeating options”. On the top right of this panel, there’s a dropdown with the following options.

Repeating options for the background image

There are several options for repeating your image background

Any of these will apply in a case where the image ends and there’s still content on the page. Repeating the background is useful in cases of motives.

You can either choose to repeat them horizontally, vertically, both ways, or don’t repeat at all.

Containers Are Still on Top of the Page

If you need to “overwrite” the background of a block, highlight it, or just have a different background, you can still do so. Blocks are above the page, hence every block’s background will be visible, “hiding” or “covering” the page background.

A black background for a block

This image illustrates how a block’s background will be above the page’s background

Use cases

A full page background will be really helpful in cases where the design of your page is not just a single color. Even if its a single color, it’s much faster and easier to set it up.

Take the following image as an example.

Push Up Charity site sample

Instead of exporting an image for every block one by one, use a full height image as background

There are patterns and different colors across sections of the page. Instead of exporting an individual image for each block and making them match each other, you can just have a single, long strip image and have it repeat horizontally. Much easier!

Do you have any questions or comments? Please share below!

Menu