---
title: "Using a Background Image in the Header"
description: "When you set up your HelpDocs you'll get your primary color as the background for your header. Sometimes you might want to change this into an image. 📷"
url: "https://support.helpdocs.io/article/dwthoe9s8i-using-a-background-image-in-the-header"
category: "Code Snippets"
updated_at: "2026-07-30T17:24:42Z"
---

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

![Example of an image background for a HelpDocs knowledge base](https://files.helpdocs.io/Ytt2uahFxY/articles/dwthoe9s8i/1785432214714/screenshot-2026-07-30-at-18-23-18.png)

### 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](https://my.helpdocs.io/app/settings?tab=brand) and looking at the selected option under **Template**
3. Head to **Settings** > [Code](https://my.helpdocs.io/app/settings?tab=code) > **CSS**

🌙 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](http://caniuse.com/#search=filter).

**🐌 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](https://www.giftofspeed.com/png-compressor/) to reduce it even more.

### V5

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

### V4

#### Bars

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

### V3

#### Curve

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

#### Boxed Instant

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

#### eCommerce

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

#### Bars

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