Not all website building blocks allow you to add a background image, so the first step is to identify the block you're editing.
Here's a list of blocks that allow you to add a background image:
- HEADER (AGENCY)
- HEADER (LARGE)
- HEADER (MARKETING)
- TEXT ON IMAGE
If one of these website building blocks isn't already available on your template, it's easy to add a new block.
IMPORTANT: Ensure your images are high quality and high resolution. We recommend a minimum of 1200 x 1200px for background images. The size that an image is displayed will be determined by the size of the device being used to view the website but there are tools within each building block to help you choose the height of the image and to select a focal point.
Changing a background image
1. Hover over a block that shows a background image and click the Settings button
2. In the toolbar on the right hand side of the page, click Edit image
3. Click Upload new image to select a file from your device. Alternatively, you can choose a previously uploaded image or use the Unsplash integration to find a free stock photo
Selecting a background image focal point
When the file has finished uploading, use the focal point picker to select the most important part of the image. This will ensure that the image looks good at all sizes, no matter what type of device is being used to view the site.
Changing the image color layer
Blocks with images as backgrounds provide the option of adding a semi-transparent layer of color over the image to improve the readability of text.
The option to add color is located in the block's Settings toolbar.
This is the same block without any color layer:
Our tips for choosing background images
Finding a good background image can be a little tricky. The most important thing is to choose one that will POP on the page, but it also must look good at all sizes.
Generally, it's best to avoid using photos of people in the middle distance or product close-ups because when these are viewed on smaller devices they may be cropped and/or partially obscured by text. We recommend using images with important detail as foreground images only.
Some background image inspiration from Unsplash: