There are several options for customizing your block background. This tutorial will walk you through them.
Changing the background image
To change the image that appears in your block, click on the Edit image icon.
Once the Image resizer tool loads, upload the new image from your computer.
Once it has loaded, click on Submit "check" icon:
Your new background image will be uploaded. Depending on the image, your block design might change automatically.
Using preset background colors
Click the Block settings icon in the menu:
In the Appearance tab, check the Add overlay option. Then you can customize the shade and intensity of the overlay using one of the preset options:
You can choose from white, back, and gray background overlay shades.
You can also increase the overlay opaсity by dragging the handle below the Add overlay option:
This can help your text stand out more on top of the muted background image.
Once you are happy with the result, click Save.
Changing the background color
You can also easily change the block background and fill it with a specific color. To set a plain color as a block background, follow these steps:
1. Use an image editor or a screenshot tool 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.
2. Upload this piece of the image as a block background. Hover your mouse over an existing block background image and click on the Edit image icon.
The Image resizer tool will load. Click on the Upload image icon.
Locate the color sample image on your computer and upload it to your website. The image will automatically multiply providing a solid layer of color on the block background:
Adding an animated image as a background
Do you want to create a whole new look for your block or a website? Try adding an animated image as a background.
Before you begin
You can find an animated .gif file available for download. Use this Google search or try these websites to download animated images for your background:
- Motionelements.com (paid)
Add an animated background image
1. Navigate to the page and a block where you want to add an animated background.
2. Hover over any area on the page to trigger the block editing menu. Click on the Replace image icon.
3. Locate an animated .gif file on your computer and select it.
Note: your file size should not exceed 5 Mb. To upload larger files, you will be prompted to upgrade.
4. Your animated background will be automatically resized and added as a background.
Changing block background on mobile
You can easily replace a block background image on any device, even your smartphone. Here's how you can do that:
1. Navigate to the block which background you would like to change.
2. Tap on the empty space on the block to activate the block editing menu.
3. Click on the "picture" icon. You will have options to take a new image with your camera, choose an image from your photo library, or locate a file to be used as a background.
3. For this example, we would be choosing an image from the Photo Library. Click on this option and choose a suitable image from your device.
4. Crop the image using the preformatted grid which ensures that the image fits the block design in the best way:
5. Click Submit and the image will be uploaded to your website. Result:
Tip: To ensure that your image looks great on displays of all sizes and resolutions, including Retina, choose high-resolution images.
Can I remove the background?
if your chosen 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, choose a new block with a plain background from the Block Library.
To have a background of a different color, create an image with your chosen color background in an image editor and choose this file as a block background. Here are more details about how to do it.