Change the background image on my homepage

The default knowledge base theme has a grey tweed background or banner image, but we encourage you to change it.

You can choose to replace it with a solid color, a color gradient, or an image of your choice. Steps for each are outlined below!

Replace with a solid color

You can replace the background with a solid color or a color gradient. To replace it with a solid color:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. To add a solid background color, copy the code below and paste it anywhere into the Custom CSS editor:
    .ko-homepage-top {
        background-color: #8bc34a; /* Adjust to use color of your choice */
        background-image: none;
    }
  4. Replace the background-color hex in row 2 with a color of your choice.
  5. You can use Preview Changes to see the difference.
  6. Be sure to Save your changes once you're done.

Replace with a color gradient

To replace the background image with a color gradient:

  1. Go to Settings > Style.
  2. Below the preview pane, be sure Custom CSS is selected.
  3. Copy the code below and paste it anywhere into the Custom CSS editor:
    .ko-homepage-top {
          background-image: linear-gradient(-90deg, red, yellow);
    }
  4. Replace the linear-gradient values with your choice.
  5. You can use Preview Changes to see the difference.
  6. Be sure to Save your changes once you're done.

Replace with your own image

You can replace the background grey tweed image with an image of your choice, too.

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 here.
  • 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 home 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. Copy the code below and paste it anywhere into the Custom CSS editor:
    .ko-homepage-top {
        background-image: url("/css/images/tweed.png");
    }
  6. Replace /css/images/tweed.png in row 2 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:
  7. You can Preview Changes to see the difference. If you have repeating or other issues, see the steps below to troubleshoot further.
  8. Once you're happy with your image changes, be sure to Save your changes.

Is your image repeating?

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

Sample screenshot with a single image repeating multiple times on the home pageSample 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:
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
        background-size: cover;
    }
  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 :
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
        background-size: 100% 100%;
    }