Add a background image to my homepage

All new knowledge bases are created with no banner image on the homepage. If you'd like to add one, you can choose to replace it with:

• A solid color
• A color gradient
• An image of your choice

Steps for each are outlined below.

Before you begin

Before you begin, you'll need to know two things:

• The color(s) you'd like to use for a solid color or color gradient background (hexes, RGB, or browser default names are fine) OR the image you'd like to use
• Whether you're using our out-of-the-box Support Theme or a customized theme (read on in this section for more details)

To figure out if you're using our out-of-the-box Support Theme, first, be sure your knowledge base currently doesn't display a banner image of any kind on the homepage. If it does, head over to Change the background image on my homepage instead.

Then:

1. Check if your Custom CSS begins with this section:
   
2. If it does, you're probably using our Support Theme. You can follow any of the instructions below without making any adjustments.
3. If it doesn't begin with that section, your knowledge base has a customized theme. You'll need to see if there's any CSS that includes .ko-homepage-top and adjust that CSS. You can use the instructions below as a guide, but you may need to make additional tweaks.

Replace with a solid color

You can add a solid color to your home page banner area:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
   
4. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section.
5. Remove background: none;
6. Copy the code below and paste it in where the background: none; was:

       background-color: #8bc34a; /* set background color for homepage banner */
       background-image: none; /* ensure no background image displays */

7. Adjust the background-color value to be the hex or rgb value of your choice.
8. Your final CSS should look like this:
   
9. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
10. Be sure to Save your changes.

Replace with a color gradient

What if you'd rather use a color gradient, instead of a solid color, for your banner area?

Don't worry, you don't have to know anything about image editing tools and don't have to generate it yourself. There's a built-in CSS function that can do color gradients for you--you just need to know which colors you want to feed in! You'll need at least two colors to pass in to the function; you can used browser default named colors (like red, yellow, blue) or hexes or rgb values for specific brand colors.

In our example below, we use browser default named colors.

To add a color gradient area to the top of your homepage:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS is selected.
3. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
   
4. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top section.
5. Remove background: none;
6. Copy the code below and paste it in where the background: none; was:

       background-image: linear-gradient(red, yellow); /* set background color gradient */
   

7. Replace the linear-gradient values with your choice. You must have at least two colors but can have more, and you can also specify direction and/or degree. See the W3School's entry for linear-gradient function for more details.
8. Your final CSS should look like this:
   
9. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
10. Be sure to Save your changes.

Replace with your own image

First, you'll need to find an image you'd like to use. This can involve some trial and error. Here are some tips to help you find a good image:

• Ideally you want an image with a 5:1 aspect ratio, so it's much wider than it is tall.
• Large overall dimensions tend to work better, around 1500px x 300px is a good place to start, though we have no set requirements.
• The overall image file size should be relatively small. Ideally the image file size is in kilobytes (KB) not megabytes (MB) as large files will slow down your page load time.
• If you have the choice between a .jpg and a .png file, choose the .png. PNG files tend to scale better with different screen sizes, whereas .jpg can become a little fuzzy at certain resolutions.
• You might also choose a smaller image that would look nice as tiles in the background.

Once you have an image that you'd like to work with:

1. Go to Library > Files and upload it to your File Library.
2. Once you've uploaded your image file, find the URL. Copy it and paste it into a text editor or somewhere else--we'll need it later!
3. Go to Settings > Style.
4. Below the preview pane, be sure Custom CSS is selected.
5. Find the Home Page Top and General section of your Custom CSS, which is not quite halfway down:
   
6. The changes we're making should all be within the .hg-minimalist-theme .ko-homepage-top setting.
7. Remove background: none;
8. Copy the code below and paste it where the background: none; was:
   

       background-image: url("/css/images/tweed.png");
   

9. Replace /css/images/tweed.png in row 1 with the URL you copied in Step 2 from the File Library. Keep the URL in "quotes". So, for example, here's what it might look like using a URL from our File Library:
   
10. Optional: if you'd like the banner to extend slightly below the search box on the homepage, remove the padding-bottom line from that Custom CSS.
11. Once you're happy with your image changes, be sure to Save your changes.
12. If you have repeating or other issues, see the steps below to troubleshoot further.

Is your image repeating or stretched weirdly?

If your image is smaller than the space provided it will repeat itself or stretch oddly:

Sample of a repeating/tiled image

To fix this, you have two options:

1. Add background-size: cover to your CSS. This will stretch the image to make it fit the overall dimensions. Sometimes this works well, but sometimes it distorts or cuts off parts of the image, so take a good look at the results. Your resulting CSS should look something like this:

   .hg-minimalist-theme .ko-homepage-top {
       background-image: url("https://d383cql5uq169w.cloudfront.net/app/image/pid/5de54a3d6e121c303e3ba653/id/610802bfba092864717b2431/n/sample-banner-image.png");
       background-size: cover;
       padding-top: 2em;
       padding-bottom: 0em;
   }

2. If you don't like the look of background-size: cover, try adding background-size: 100% 100% to your CSS. This will try to stretch the image proportionately to fit the screen it's displayed on, which can be more elegant for lots of different devices and sometimes bypasses the off-center distortion of background-size: cover. Your resulting CSS should look like something like this, with a different :

   .hg-minimalist-theme .ko-homepage-top {
       background-image: url("https://d383cql5uq169w.cloudfront.net/app/image/pid/5de54a3d6e121c303e3ba653/id/610802bfba092864717b2431/n/sample-banner-image.png");
       background-size: 100% 100%;
       padding-top: 2em;
       padding-bottom: 0em;
   }