---
title: "How to add a background image for a text content"
slug: "how-to-add-a-background-image-for-a-text-content"
description: "To add more essence to your text content, you can add a background image. The background image you want to add must be available on the web. If the background image is on your local device, you can upload it to the Drive and utilize the image URL."
tags: ["Customization"]
updated: 2025-12-29T09:10:28Z
published: 2026-01-31T09:30:11Z
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to add a background image for a text content
To add more essence to your text content, you can add a background image. The background image you want to add must be available on the web. If the background image is on your local device, you can upload it to the Drive and utilize the image URL.
### Steps to add a background image
1. Navigate to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
2. In the Custom CSS tab, paste the below CSS snippet in the panel.
```css
.bgimg
{
background-image: url("IMAGE_URL");
}
```
1. In the above snippet:
- **Class name** is `.bgimg`. You can replace it as per the requirement.
- **IMAGE_URL** - Add your desired background image URL.
2. Click **Save**.
3. Navigate to the desired article and add the following snippet in the editor:
Example 1Example 2
```markdown
Text_content
```
- **Text_content** - Add the desired text content.
- **bgimg** - If you change the class name, replicate the same changes in this field.
```markdown
## Heading 2
* [ Formatting Commands](/v1/docs/md-5#testheading)
* [Punctuation & Symbols](/v1/docs/clone-html-image-vertical-alignment)
* Dates & Times
* Numbers, Dollars & Cents
```
This code creates a styled section with a background image and displays a formatted list of links and text inside it. It uses a with a background image, a heading, and a bulleted list of links and text for navigation or reference.
- **bgimg** - It represents class name. You can customize based on your requirement.
- **Image URL:** Add the desired image URL.
> [!NOTE]
> ** NOTE
>
> To add a background image for text in the WYSIWYG or Advanced WYSIWYG editor, simply use the above HTML code in the **Code view** (**) of the editor. Replace *Text_content* with your desired text and click**** Preview** to view the output.
1. The desired background image appears for the text content in your knowledge base.
