How to Add an Image as a Background to a Kanban

Personalizing your Kanban board with a custom background image can transform a standard workspace into a more visually engaging and motivating environment. This guide will walk you through the simple process of adding a background image to your Kanban board, making your project management experience more unique and inspiring.

Here is an example of what the Kanban can look like after implementing this customization:

Before You Begin: What You'll Need

To get started, you will need two things:

  1. Your Chosen Image: Select a high-quality image that you want to use as your background.

  2. A Base64 Encoding Tool: This is a free online tool that will convert your image into a text string.

Step 1: Optimize and Prepare Your Image

For the best performance, it's a good practice to optimize your image before uploading it. Large image files can slow down the loading time of your Kanban board.

  • Resize Your Image: Aim for a file size that is appropriate for a background, generally under 1MB.

  • Choose the Right Format: JPEG is a good choice for photographic images.

There are many free online tools available to help you resize and compress your images without sacrificing too much quality.

Step 2: Convert Your Image to a Base64 String

Once your image is ready, you'll need to convert it into a base64 string. This may sound technical, but it's a straightforward copy-and-paste process with the help of a free online tool.

What is Base64?

Think of base64 as a way to translate your image into a language that web browsers can easily understand and display. It converts the binary data of your image into a long string of text.

How to Encode Your Image:

  1. Navigate to a free online base64 image encoder. There are many options available, such as elmah.io or base64-image.de.

  2. Upload your optimized image to the encoder.

  3. The tool will generate a long string of text. This is your base64 string.

  4. Copy the entire string to your clipboard.

Step 3: Add the Background Image to Your Kanban Board

Now it's time to apply your new background to the Kanban board.

  1. Navigate to your Kanban board's settings.

  2. Locate the configuration section for the board's appearance or styling. In the provided example, this is found under Kanban Properties > Config > Edit.

  3. Open the Dashboard CSS Styles settings.

  4. In the CSS editor, you will add a new rule for the background image. You will need to add the following CSS rule name: 

    background-image: url('PASTE_YOUR_BASE64_STRING_HERE');

    Make sure to replace PASTE_YOUR_BASE64_STRING_HERE with the entire base64 string you copied in the previous step. It should be enclosed in the single quotes within the url() function. Add additional CSS rules for positioning your background image as needed: 

    background-position: bottom center;
background-repeat: no-repeat;
background-size: 100% auto;

  5. Save your changes.

The Final Result

After saving your changes, your Kanban board will now display your chosen background image, creating a more personalized and visually appealing workspace.

By following these simple steps, you can easily customize your Kanban board and make it a more enjoyable and productive space for you and your team.

Last updated