How to Set a Full Page Website 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!
It may help to see a cross-section of the above sample in 3d:
How to use it
You’ll find a link to the page background panel in every block’s style dot.
Click it and it will open the styles for that block.
Then you’ll be presented with the actual options for your page background.
Let’s go over each option.
- Background Color. It allows you to select a solid color for the background.
- Background Image. You can either select a pre-designed one, or upload your own image.
- 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%.
- 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.
- Gradient. Currently, a gradient means that current color will fade to black.
- 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.
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.
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 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.
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!