How to Change the Header Background in BoldGrid 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