Table of Contents

Using a Background Image in the Header

Jarratt Isted Updated by Jarratt Isted

When you set up your HelpDocs you'll get your primary color as the background for your header. You might want to change this to a photo background to match your brand and the style of your main website.

Adding an image to the header background

  1. Have the URL of the image you want to use ready
  2. In HelpDocs, check the template you're using by going to Settings > Brand and looking at the selected option under Templates
  3. Head to Settings > Code > CSS
  4. Select the following template you're using below and paste in the code, replacing IMAGE_URL with the image URL you have ready
    1. Boxed Instant
    2. eCommerce
    3. Bars

šŸŒ™ Darken your image before uploading it to make sure the text above is still readable for your users.

If you know your CSS, you could use the filter: brightness(50%); property to adjust it in the browser, although this isn't supported in earlier versions of browsers.
šŸŒ Don't slow down your knowledge base

If your image is too large you might run into issues with your knowledge base taking a long time to load. Reduce the size of your image (less than 1500px by 500px) and use a tool like PNG Compressor to reduce it even more.

Curve

#main[data-hd-template="curvev3"] #header .bg-faded {
    background-image: url('IMAGE_URL');
}

Boxed Instant

#main[data-hd-template="boxedinstantv3"] #header {
    background-image: url('IMAGE_URL');
}

eCommerce

#main[data-hd-template="ecommercev3"] #header {
    background-image: url('IMAGE_URL');
}

Bars

#main[data-hd-template="barsv3"] #header {
    background-image: url('IMAGE_URL');
}

What did you think of this doc?

Overriding the Font on Your Knowledge Base

Adding Lightboxes to Images