Info
Content

Using an image as background for a page

This article will discuss how to set a background image to a page using custom CSS.

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, please 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 within the Additional CSS Classes section:

background-image

Click on Update and Save and then add the following code to the CSS section of the page.

.background-image{
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -12;
}
.background-image img{
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

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

 

 

Back to top