Customizing the block background

Choosing the right background color for an individual block can help its content stand out from the rest of your website. It's a great way to highlight your offer or your brand. You can choose to change the background of individual blocks or keep the pre-designed background images.

What are the recommended background image sizes?

Before replacing a block background image, please consider the following recommendations into image size and resolution.

  1. The best website background image size is 1920 x 1080 pixels and the ideal ratio is 16:9.
  2. The dpi (dots per inch) should be at least 72, yet consider keeping the file size as small as possible to minimize site loading time.

Important: The incorrect image size can lead to pixelation, stretching, and other viewing issues.

To ensure that your image shows well in all browsers, spend some time testing it. If you use Chrome, for example, make sure the image also loads and displays properly when using Safari and Firefox.

Upload the new background image

1. Click on the block with a background image. In the control panel, click the "picture" Edit Image icon.

Screenshot_2021-05-31_at_14.38.25.png

2. Click Upload image:

Screenshot_2021-05-31_at_14.43.12.png

Next, choose one of the two options: to upload a file from your computer or mobile device, or to use a stock image. Screenshot_2021-05-31_at_14.46.12.png

Choose the option that you prefer. 

3. Click Submit to confirm the change.

Screenshot_2021-05-31_at_14.48.27.png

The new background image will appear in your block.

Changing the zoom of your image

You can zoom in on the image by clicking Change zoom:

Screenshot_2021-05-31_at_14.40.45.png

Next, move the slider to zoom in on the image. 

Once done, click Submit to confirm the changes.

Tip: If you are unhappy with the background change, tap the Undo button in the top right corner or press Ctrl-Z on your keyboard and repeat the steps with another image or using another image portion.

Quickly changing the background color

If you want to change the block background color (not image), follow these steps:

1. Go to Block settings

2. Click on the Appearance tab.

3. Choose one of the available color options. For this example, we have chosen a black background:

Screen_Shot_2019-09-25_at_11.42.18.png

Note that the font colors of this block have also changed to ensure that the text remains easily readable.

Changing the background to a custom solid color

To set a plain color as a block background, follow these steps:

1. Use an image editor to create a rectangle shape filled with the color of your choice. Alternatively, search online for "color swatches" and take a partial screenshot of the color you like.

Screen_Shot_2019-09-05_at_15.34.30.png

2. Upload this solid-colored image as a block background using the steps outlined above.

 

Change the background overlay

You can quickly add a transparent layer on top of your block background to make your content stand out more. Here's how you can do it:

1. Hover your cursor over the block that contains a background to activate the control panel. Click Edit Image.

2. Click Change overlay:

Screenshot_2021-05-31_at_15.57.31.png

Move the sliding handle to achieve the desired level of transparency for the overlay:

Jun-01-2020_16-29-04.gif

Once you have achieved the desired result, click Save to apply the background changes.

For another way to change the overlay in Block settings, visit this tutorial.

Changing the text block background

To change the text block background, follow these steps:

1. Navigate to the text block and click on the “gear” Settings icon to access the Block Settings area.

2. In the Appearance tab, you can choose a background color for your block. Each background color has been professionally selected to match the look and feel of your website template.

Screen_Shot_2021-02-12_at_19.18.02.png

Note: the pre-defined text colors will be adjusted to lighter or darker ones, in order to maintain the contrasting color scheme and make the text more legible. You can learn more about text color formatting in this tutorial: Changing text colors.

Screen_Shot_2021-02-12_at_19.19.29.png

3. Once you are done customizing your Text block, click Save to apply the changes. On mobile, click the floppy disk icon in the top right corner.  

 

Can I remove the background?

If your block design has an image background, you cannot delete this image. If you prefer to have a plain white or black background for your block, then you can choose a new block with a plain background from the Block Library.

Tip: To ensure that your image looks great on displays of all sizes and resolutions, including Retina, choose high-resolution images. The block background feature supports all high-resolution formats, including Retina.

 

Other helpful articles

Adding an animated background

Changing a color palette

Adding block background overlays

Recommended image sizes

Was this article helpful?
0 out of 0 found this helpful