The header background is the image that shows on the top of all your Knowledge Base pages, and this can be easily customized to match your brand and make your Groove Knowledge Base feel like an extension of your own website.

Now, in addition to uploading your own image, you have the option to choose an image from our collection of 12 custom-made illustrations or select an image straight from Unsplash. All at no additional cost. 

These settings can all be found in your KB dashboard under Look & Feel > Colors & Background in the right sidebar. 

Setting a Background Color

If you are using a transparent image, or if you just want to have a color as the header background, you can change that color to anything you want. The Background color is used for both the header background and the mobile menu, so simply update that to match your style.

Uploading an Image

To upload an image of your own, click on the Upload image button under Background image. We support JPEG and PNG with a max file size of 5MB, and for the best results we recommend a resolution of 2560×800 pixels.

Groove Illustrations

We have created a set of 12 illustrations to help get you started with a header background. These images are totally free and cover a variety of styles and industries, so that there's something for everyone to choose from.

To browse the Groove collection, click on Choose an image and you'll see two tabs — click on the Groove tab to see our illustrations. 

Then when you're ready to use an image, click on it and then click the Select button.

Unsplash Photos

We have integrated with Unsplash to make searching for background images as simple as possible. Unsplash provides over 1,000,000 free-to-use and high-resolution images from 150,000+ photographers and creators across a wide variety of categories. As they say, "Chances are we've got a photo for you".

To browse their collection, click on Choose an image and then click on the Unsplash tab to start your search.

By default, we present you with images from their Editorial collection, but you're free to search for anything you like by simply entering it into the search field. As you scroll down we'll fetch more images for you until you find just the right image. 

To use an image, click on it and then click the Select button.

Removing a Background Image

When you want to remove your header background image, click the Remove image button showing below the image in your sidebar. You will have to confirm this, but until you click Publish you can still revert it by clicking on Discard Changes.

Background Scaling

The Background scaling setting allows you to control how your background image is shown. It provides you with three options:

  • Stretch image: Your image will be stretched to ensure it covers the header. For full-screen images this is usually the best option, as it automatically scales the image to show as much as possible.
  • Tile image: Your image will be repeated to cover the entire header. For images larger than the header this will be the same as Leave static, but this is great for when you want to have e.g. a repeating pattern.
  • Leave static: Your image will be left as is and placed in the top-left of the header. It will not be stretched, and it will not be repeated.