Change the background image on my homepage

If your knowledge base homepage already has some kind of banner image or colored background and you'd like to change it, you can change it to:

• A solid color
• A color gradient
• An image

Before you begin

If your knowledge base already has an image on the homepage of some kind:

1. Go to Settings > Style.
2. Check your Custom CSS to see if it already has something set for .ko-homepage-top.
3. If it doesn't, you should be able to follow the instructions below exactly.
4. If it does, you'll need to adjust the CSS. You can use the instructions below as a guide.

Replace with a solid color

You can add a solid color to your homepage banner area:

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:

   /* Set homepage banner image */
   .ko-homepage-top {
       background-color: #8bc34a; /* set background color for homepage banner */
       background-image: none; /* ensure no background image displays */
   }

4. Replace the background-color hex in row 3 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:

   /* Set homepage banner image */
   .ko-homepage-top {
         background-image: linear-gradient(red, yellow); /* set background color gradient */
   }

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

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

   /* Set homepage banner image */
   .ko-homepage-top {
       background-image: url("/css/images/tweed.png");
   }

6. Replace /css/images/tweed.png in row 3 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:

   /* Set homepage banner image */
   .ko-homepage-top {
     background-image: url("https://dyzz9obi78pm5.cloudfront.net/app/image/id/1ab1ab1ab1ab1ab1ab1ab1ab1/n/sample-banner-image.png");
     padding-top: 2em;
     padding-bottom: 0em;
   }

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

   .ko-homepage-top {
       background-image: url("/css/images/tweed.png");
       background-size: 100% 100%;
   }