How to Change the Header Background in Crio

With BoldGrid Crio, you can use a video, image, or color for the background to help give your website a unique identity.

Adding a Video Background to the Header

You can also add a video to the header background. The recommended resolution of the video is HD (1920 x 1080 pixels).

Note: Background videos only displays on the homepage and you will receive a notification stating that your theme does not show a header video if you are customizing a different page.

To add a Header Video Background:

In the Dashboard navigate to Appearance → Customize
In the Customizer menu navigate to Design → Header → Background
Click Header Video
Select a video in the Media Library or enter the YouTube URL of your video
Click Publish to save your changes

Adding an Image Background to the Header

Use a background image in your header to give it a unique identity. The recommended size for header images is 1920 x 1080 pixels. If you still have a video saved in the ‘Header Video’ section, it will need to be removed before the image will be visible.

In the Dashboard, navigate to Appearance → Customize
In the Customizer menu, navigate to Design → Header → Background
Scroll down to Header Image
Click Add new image, then Upload or select one from your Media Library
Click Publish to save your changes

Adding an Image Overlay to the Header

Using an overlay on your background image or video can help your header be more accessible to your users by improving the contrast between the image and text.

Click the toggle to enable overlay options
Select an Overlay Color
Use the slider to change the Overlay Opacity
Click Publish to save your changes

Changing the Header Background Color

If you have added an image or video, be sure to delete it from the appropriate panel in the Customizer in order to see the selected color.

In the Dashboard navigate to Appearance → Customize
In the Customizer menu navigate to Design → Header → Colors
Click on the palette color that you wish to use for your Header Background
Click on Publish to save your changes