Using a Background Image in the Header

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 Template
3. Head to Settings > Code > CSS

V5

#search-container {
              background-image: url('IMAGE_URL');
          }

V4

Bars

#homeBanner {
              background-image: url('IMAGE_URL');
          }

V3

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');
          }