How to change the background of a block

Updating your block’s background is a great way to make your site fit your clinic's brand. You can adjust the background colour, upload an image, or add a looping video for extra visual interest. This guide will show you how to upload an image or video to a block's background, as well as make sure the block's design settings allow for that image or video to shine through. 

 

How to change a block's background colour

In this section, you'll learn how to change the background colour of any block. 

1. Navigate to the block you want to customize and click the Edit Block button on the top right-hand corner.
2. In the Style tab , you'll be able to select various background colour options, ranging from your brand colours, as well as black, grey and white neutral shades. 
3. You can drag the Opacity slider to adjust how much of the background shows through. You'll want to set this below 100% to make background images or videos visible.

How to change a block's background using images

You can add an image to the background of a block to add visual interest to it.

1. Navigate to the block you want to customize and click the Edit Block button on the top right-hand corner.
2. In the Background tab, click the photo plus icon to upload an image from your computer.
3. After uploading, use the Crop Focus option in the bottom-left to indicate where you'd like the image to be focused.
4. To remove the background image, click the Trash Can icon in the Background tab.

Optional: How to adjust the background image scrolling behaviour

As you scroll past your block, the background image can move in different ways, remaining stationary or moving with the direction of scrolling.

1. Once you've uploaded a background image in the Background tab , you'll scroll to the Background Motion dropdown.
2. Clicking the drop-down, you can select your desired scroll effect: 
   1. Fixed will mean that the background image stays in one place on the website, while the text continues to scroll.
   2. Parallax will mean that both the image and the text move together with the scroll.
   3. Off means the background image is stationary and scrolls normally with the page.
3. Once selected, the effect is immediately applied. 

How to change a block's background using a video

You may want to display a video in your block, giving your text media block an extra bit of flair. 

1. Navigate to the block you want to customize and click the Edit Block button on the right-hand side.
2. In the Background tab, scroll till you reach the Background video section.
3. Paste a valid Vimeo URL into the field (YouTube links will not work for background videos).
4. Make sure Overlay Opacity on the block is less than 100% so the video can be seen. 

Nice work! Your block now has a custom background that reflects your clinic’s personality. Whether you used a brand colour, a team photo, or an engaging video, your page now looks extra inviting for patients.