Customizing 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 for 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. Hover over the block with a background image. In the control panel, click the Edit image icon.
   
   
    
2. Click Replace image.
   
   
   
    
3. Next, choose one of the two options: to upload a file from your device, or to use a stock image.
   
   
4. Choose a file on your device or in the free stock photos library and submit the changes. The new background image will appear in your block.

Cropping your image

You can zoom in and out of the image as well as crop it by moving up, down, to the left, or to the right. To do so, click the Crop icon:

Next, move the slider to zoom in and out of the image. You can also drag and drop it to move up, down, to the left, or to the right. 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.

Change the background overlay

You can quickly add a color overlay for a block image background to make your content stand out more. Here's how you can do it:

1. Hover your cursor over the block you want to add the overlay to. Click Settings.
2. In the Appearance tab, a tick to Add overlay.
   
   
3. Move the sliding handle to achieve the desired level of transparency for the overlay.
4. Once you have achieved the desired result, click Save to apply the background changes.

Changing the background color

If you want to change the background color (not the image) of a block and its columns, follow these steps:

1. Select the block you want to edit.
2. Open Block Settings and go to the Appearance tab.
3. In the Block style or Columns style section, choose one of the available color schemes.

You can also create your own custom color scheme:

1. Click + Add color scheme next to the existing color schemes.
2. In the Color settings dialog, choose a solid color or enter a HEX color value.
3. Click Submit. A new color scheme editor will open, allowing you to customize the scheme further. For example, you can adjust text colors and other color settings to match your design.
4. Click Save to add the new color scheme to your list of available color schemes.
5. Select the new color scheme if it is not already applied.

6. Click Save again to apply the changes.
   
    

Note: When you change to a darker color scheme, the font colors of the block will also change automatically to ensure that the text remains easily readable.

Creating a gradient color scheme

When creating a custom color scheme, you can also choose a gradient background.

1. Click + Add color scheme in Block settings.
2. Switch to the gradient option in the color picker.
3. From the dropdown menu, choose one of the available gradient types:
   1. Linear – Gives you full control over the gradient settings. You can adjust the gradient direction, choose your gradient stop colors, or select one of the ready-made options from the Website gradients section.
   2. Radial – Lets you choose the gradient colors and adjust the gradient position by dragging and dropping the center point.
4. Optionally, choose a separate color scheme color. If you do not specify one, the first gradient stop color will be used automatically.
5. When you are happy with the result, click Submit.
6. In the color scheme editor, make any additional adjustments if needed, then click Save.

The new color scheme will be added to your available color schemes and can be used throughout your website.

Gradients are also available in global colors (on the Topbar: Design -> Color), making it easy to reuse them across your website and maintain a consistent design.

Can I remove the background image?

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