Change the background image on my homepage

The default knowledge base theme has a grey tweed background but it's easy enough to change! You can either replace it with a banner image or with colors.

Replace with colors

Go to Settings > Style and paste the below code in the Custom CSS field. 

.ko-homepage-top {
    background-color: #8bc34a; /* Adjust to use color of your choice */
    background-image: none;
}

Replace the background-color with a color of your choice.

Pro Tip: For a little extra pizzazz, consider using a color gradient:

.ko-homepage-top {
      background-image: linear-gradient(-90deg, red, yellow);
}

Replace with your own image

Go to Settings > Style and paste the below code in the Custom CSS field. 

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

Next, find a suitable image. This is the trickiest part. Here are some simple tips to help you find a good image.

  1. The image should have fairly large dimensions about 1500px x 300px (this are not strict dimensions as larger images can be adjusted in this space).
  2. The image file size should be relatively small. Ideally the image file size is in kilobites (KB) not megabites (MB) as large files will slow down your website.
  3. (Alternative) You might also choose a smaller image that would look nice as tiles in the background.

Once you've selected an image upload it to your KnowledgeOwl File Library and obtain the URL to your uploaded image

Once you've obtained your image URL go back to Settings > Style > Custom CSS replace the highlighted portion below with URL to your image. 

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

Before you save, remove the https: from the front of your URL. This will ensure that your images loads regardless of whether your site is secure or not.

.ko-homepage-top {
    background-image: url(//dyzz9obi78pm5.cloudfront.net/app/image/id/598f28df6e121c4f36ac0cdf/n/open-book-on-orange-low.jpg);
}

Is your image repeating?

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

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--but sometimes this will somewhat distort or cut off parts of the image, so take a good look at the results. Your resulting CSS should look like so:
    .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 so:
    .ko-homepage-top {
        background-image: url(/css/images/tweed.png);
    	background-size: 100% 100%;
    }