Working with background images

You can use background images to cover the background of a block or column. This allows you to place elements on top of those images. In this article, we show you how to set a background image.

Background image vs. the image element

Background images are used to fill up the background of a block or column. In the example below, you can see that the block background has been covered with the image, while the text "The future of work is quantum commuting" is layered on top.

Keep in mind that there are two ways to use images in your Foleon Doc:

• As a background image (this article): to cover the background, as seen in the example above, you can choose to fill it with a background image.
• As an image element: in the elements section on the left-hand side of the editor, you are able to implement an image element into a column. Learn more about the image element in our article Working with the Image element.
• 

How to set a background image

As mentioned above, you can set a background image for a block as well as a column. We go over how to do this below.

• Block background image

  In the purple block settings bar, click on the Change background icon. In the example below, the placeholder is visible because no background image has been set. If a background image has been set, a small thumbnail of the image will be visible.

  

  You will then be taken to the background settings of the block. With the background type set to Image, you can insert an image to cover the background of your block. Hover over the image area and click on it to add image.

  💡You can also access the background settings by clicking the block settings icon (cogwheel).

  

   

  A pop-up screen with the media library will appear. Select your image and click select media. You have now implemented a background image for your block. You will see in the purple block settings bar that a small thumbnail of the background image is visible.

  

   

• Column background image

  Setting a column background image is similar to the workflow for the block background image.

  In the orange column settings bar, click on the change background icon. In the example below, the placeholder is visible because no background image has been set. If a background image has been set, a small thumbnail of the image will be visible.

  

  You will then be taken to the background settings of the column. With the background type set to Image, you can insert an image to cover the background of your column. Hover over the image area and click on it to add image.

  💡 You can also access the background settings by clicking the column settings icon (cogwheel).

  

  A pop-up screen with the media library will appear. Select your image and click on Sselect media. You have now implemented a background image for your column. In the example below, the column background image is layered on top of the background image.

  You will see in the purple block settings bar that a small thumbnail of the background image is visible.

  

Setting a background image for tablet or mobile

It's possible to set a separate block and column background image for the tablet and mobile view modes.

By default, the background images in the tablet and mobile view modes will inherit the image from the desktop view mode. However, you can replace it with images that have more suitable dimensions. It's important to know how your changes affect your content in each view mode.

• Tablet - Replacing the background image will set this new image for both tablet and mobile. The ideal dimensions for a tablet background image are 768 x 1024 px.

• Mobile - Replacing the background image will set this new image only for the mobile view mode. The ideal dimensions for a mobile background image are 523 x 934 px.

  💡 Once you have replaced a background image on a specific view mode, it's not possible to delete it. You can only replace it.

  

Ideal background image sizes

Your audience will read your content on all kinds of devices, ranging from a 5" mobile to a 23" monitor (and everything in between). Keeping this information in mind, you can imagine how important it is to design your content for different screen sizes.

Even though there are a lot of different screen sizes, we have recommendations for background image dimensions that create the best results. We recommend the following ideal dimensions for each view mode:

• Desktop: 1920x1080px

• Tablet: 768x1024px

• Mobile: 525x934px