Adding a background image to a row, column, or component

You can add a background image to any row, column, or component within your app.

For the purpose of this article we will demonstrate how to add an image as a background using rows, however these instructions can apply to columns and components as well. 

To start, go to the Page Builder and select to the page and row you wish to customize. Hover over your selected row and click on the green pencil icon to edit that row. 

Next, copy and paste the code below within the CSS tab of the row's design edit window.

background-image: url("URL_OF_IMAGE_HERE");

As you can see in the image below, your image will now appear as the row's background.

 

Don't forget to add some margins around your components to make the background fit better when necessary. 

Keep in mind that background images can be added to columns and components as well using these same instructions.