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
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

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