How to Add a Background Image to the Knowledge Base Search Area

SoftwareRoad Knowledge Base lets you add a background image behind the main title, tagline and search box on your knowledge base homepage.

This can help the page match your website branding and make the search area feel more welcoming.

Open the background image setting

To add a background image:

1. Sign in to your WordPress dashboard.
2. Open Knowledge Base > Settings.
3. Select the Homepage or Design tab.
4. Find the search area background image setting.
5. Select or upload an image.
6. Select Save Changes.
7. Open the knowledge base homepage to check the result.

The exact setting location may depend on the version of SoftwareRoad Knowledge Base you are using.

Choose an image from the Media Library

Select the background image button to open the WordPress Media Library.

You can either:

• Choose an image already uploaded to WordPress
• Upload a new image from your computer

After selecting the image, confirm your choice and save the knowledge base settings.

Choosing a suitable background image

The image sits behind important content, including:

• The knowledge base title
• The tagline
• The main search box
• Popular search links

Choose an image that does not make this content difficult to read.

Images with some clear or less detailed space usually work best.

Suitable choices may include:

• A simple branded background
• A subtle abstract design
• A softly blurred photograph
• A product-related illustration
• A light texture
• A dark or coloured gradient image

Avoid images containing lots of text or important details near the centre.

Use a wide image

The search area stretches across the knowledge base layout, so a wide landscape image normally works better than a portrait image.

A narrow or tall image may be heavily cropped on desktop screens.

The exact visible area will change depending on:

• The visitor’s screen size
• The length of your title and tagline
• The height of the search area
• The WordPress theme layout
• Whether popular searches are enabled

Always check the result on more than one screen size.

Keep the image file size reasonable

A large background image can slow down the knowledge base homepage.

Before uploading it:

• Resize it to a sensible width
• Compress the image
• Remove unnecessary detail
• Use WebP where suitable
• Avoid uploading the original full-resolution photograph

The image should remain clear, but it does not need to be large enough for printing.

Add useful image information

When uploading the image to the WordPress Media Library, use a descriptive filename.

For example:

softwareroad-knowledge-base-search-background.webp

You can also add alternative text, although decorative background images may not always be announced to visitors using screen readers.

Do not fill the image information with repeated keywords.

Check the text contrast

After adding the image, make sure the title and tagline are easy to read.

Pay attention to:

• Light text over light areas
• Dark text over dark areas
• Busy details behind the title
• Search box edges blending into the image
• Popular searches becoming difficult to see

SoftwareRoad Knowledge Base can place an overlay over the background image to help keep the content readable.

Even with an overlay, you should still choose an image with suitable contrast.

What is the background overlay?

The overlay is a transparent layer placed between the image and the knowledge base content.

It can darken or soften the background so the text and search box stand out more clearly.

For example, a dark overlay can help white text remain visible over a bright photograph.

The overlay also helps different background images feel more consistent with the rest of the knowledge base design.

Match the image to your text colours

If your knowledge base uses white title text, choose a darker image or use a stronger dark overlay.

If it uses dark title text, a lighter background may work better.

Check the following items together:

• Knowledge base title
• Tagline
• Search placeholder
• Popular search label
• Popular search links

Do not judge the image on its own. It needs to work behind all the content shown in that area.

Keep important details away from the edges

Background images are often cropped differently on desktop, tablet and mobile screens.

Avoid placing important people, products, logos or text near the far left or right edges.

A central subject may also be covered by the search box.

Simple images without one important focal point are usually easier to use as backgrounds.

Using your logo inside the background image

It is normally better to add your logo through the dedicated Knowledge Base Logo setting rather than placing it inside the background image.

A logo built into the image may:

• Be cropped on mobile
• Sit behind the search box
• Appear at an inconsistent size
• Become difficult to read
• Repeat the logo already added through the settings

Use the background image for decoration and the logo setting for your actual branding.

Preview the search area

After saving the image, open the main knowledge base page.

Check that:

• The image loads correctly
• The title is readable
• The tagline is readable
• The search box stands out
• Popular searches remain visible
• The image is not stretched
• The important parts are not hidden

It can help to open the page in a private browser window so you see the public version.

Check the mobile layout

The mobile version may crop the image differently from the desktop version.

On a phone, check that:

• The image still suits the page
• The title remains easy to read
• The search box fits the screen
• The image is not distracting
• No important part has been cropped awkwardly
• The search area is not unnecessarily tall

If the image works well on desktop but poorly on mobile, try using a simpler image with fewer important details.

Remove the background image

To return to the normal background:

1. Open Knowledge Base > Settings.
2. Find the current background image.
3. Select the remove or clear option.
4. Select Save Changes.
5. Clear the website cache if needed.

Removing the image does not delete it from the WordPress Media Library.

You can use it again later.

Replace the background image

To use a different image:

1. Open the background image setting.
2. Select the current image or choose image button.
3. Pick or upload the replacement.
4. Confirm the selection.
5. Select Save Changes.

Check the public homepage after replacing it.

If the old image remains visible, clear the WordPress, hosting and browser caches.

The background image is not showing

If the image does not appear, check that:

• An image has been selected
• The settings were saved
• The image still exists in the Media Library
• The image URL opens correctly
• You are viewing the correct knowledge base page
• Your SoftwareRoad Knowledge Base licence is active
• The website cache has been cleared

Try selecting the image again and saving the settings.

The image looks blurry

A blurry background usually means the original image is too small.

Upload a larger version with enough width for the search area.

Do not use a very small thumbnail as a full-width background.

You may also need to check whether the uploaded image has been compressed too heavily.

The image looks stretched

SoftwareRoad Knowledge Base may resize the background so it fills the available area.

An image with unusual dimensions can look stretched or heavily cropped.

Try using:

• A wider landscape image
• An image with a normal rectangular shape
• A version with more space around the subject
• A higher-quality source file

Avoid very narrow or very tall images.

The image is too dark

If the image becomes too dark after adding it, the background overlay may be combining with an already dark image.

Try using:

• A lighter version of the image
• A brighter photograph
• An image with less dark shading
• Different title and tagline colours

The final result should still have enough contrast without hiding the image completely.

The image is too bright

A bright image can make the title and search links difficult to read.

Try:

• Using a darker image
• Darkening the source image before uploading
• Choosing an image with less detail
• Using lighter text
• Adjusting the search area design colours

The search box should remain the clearest part of the section.

The image loads slowly

If the search area appears late or causes the page to load slowly:

• Check the image file size
• Resize the image
• Compress it
• Convert it to WebP
• Remove unnecessary metadata
• Replace it with a simpler image

A background image should support the design without making the knowledge base slower to use.

Background image checklist

Before finishing, check that:

• The image matches your website branding
• It is wide enough for the search area
• The file has been compressed
• The title and tagline are readable
• The search box stands out clearly
• Popular search links remain visible
• Important details are not being cropped
• The image works on desktop and mobile
• The page still loads quickly
• The settings have been saved

Your knowledge base search area now has a background image that works with the rest of the page.