Using an image as background for a page

In this article we will discuss how to set a background image to a page using custom CSS.

To start, go to the Page Builder, select the page you wish to customize, and add an image component to the page. 

 

Use the image component to upload the image you wish to use for your page background. Disable the image from popping up when clicked by setting the Enable Modal Popup setting to No. Then click Ok.

Next, hover over the uploaded image on the page, click on its gear settings icon, and select the Design option.

design-image.png

A new Design window will open up with several tabs to customize the image's design. Select the CSS tab and copy and paste the following code within the Additional CSS section:

width: 100%;
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
z-index: -12;
height: 100vh;

image-css.png

Once you click Update and Save, the uploaded image will appear as the background image for this page on the live app.