In this article, we will explain how to edit background images in both colour sections and single elements. If you would like to simply add images, How to Replace or Change an Image.


1. Background Image in Color Sections

Every element or column in the backend of your website can have an image as background. How an image in the background looks like?


Important

When using images as background of an element, take into account that the image might cover part of the text or other important figures. When changing background images, always keep in mind to double check in Preview Mode how the changes are shown on Desktop, Mobile and Tablet.


1.1. Place the image

1. Find and the colour section of your interest and click “Edit“.

Info

Colour sections are used to contain other elements such as text elements, media and so on. Be sure you are editing the colour section and not a sub-element. 

2. Click to “Section Background” and then “Insert Image“.

3. Update an image or select it from the Media Library.

4. At the bottom right menu choose the size (Typically it’s Full Size, but sometime it might need to be smaller).


 

1.2. Edit the background image in the Color Section

1. Once the image has been placed, Preview Mode on the front-end how it looks like.

Sometimes the image is so bright that is not possible to read what is written on it.

2. Go again to the colour section

3. In the “Section Background” just below the selected image, you can choose which part of the picture to focus. For instance by setting it as “Bottom right” the part of the image that will show will be the bottom right.

4. In the “Section Background Overlay” you can place an extra dark layer on the photo so that readability won’t be a problem anymore.

Suggested settings:

Opacity: 0.7
Colour Code: #000000 (Black)


2. Background Image in Elements

Basically it is possible to place an image in each Layout Element (or column)

  1. Click on “Edit” on the column you want to place an image in the background
  2. Then click the “Colour” tab
  3. Insert the image by clicking on the button.
Note

Be sure you’ve selected Layout Element. Only Colour Sections and Layout Elements can have a background image. To understand different levels, look at the screenshot below.   



Note

Since it is not possible to place an opaque layer on top of the background image for columns, in case needed it should be done through Photoshop.