Skip to content

Custom Power BI Themes: Page Background Images

This post is part 3 of 3 in the series Custom Power BI Themes
Cathrine Wilhelmsen Creating Custom Power BI Themes

In a previous blog post, we looked at how to change the background colors of Power BI reports. In this blog post, we will take it one step further and look at how to add background images to Power BI reports using custom themes. Fancy!

In Power BI Desktop, it is easy to add background images. In the Visualizations pane, on the Format tab, under Wallpaper / Page Background, just click the Add Image button. Choose your image, adjust the Image Fit as necessary, and tadaaa! You are done!

Custom Power BI Themes: Page Background Menu - Add Image

Using a custom JSON theme file is… well, not quite as easy. (At least not yet.) But why not?

When you click Add Image in Power BI Desktop, you basically upload a copy of the image to the .pbix file. Even if you rename or delete the local image file, the copy will continue to live in the .pbix file until you choose to remove it. This means you only have one single .pbix file to think about, which makes sharing and publishing reports super easy.

However, when you switch to a custom JSON theme file, you don’t go through the same “upload a copy” process. Referencing an image that doesn’t exist in the .pbix file is just not going to work. So what do we do?

We find a workaround! :)

The Workaround: Base64

And that workaround is… Base64! This is a way of representing binary data (like images) in an encoded string format. You can say that instead of referencing an image in the .pbix file, we embed the image in the JSON theme file.

Magic! ;)

Ok, so how does it work?

  1. Find an image
  2. Convert the image to Base64
  3. Copy the Base64 code into your JSON theme file

But first, let’s take a look at the report we want to update.

Original Report

To keep things simple and consistent in my posts, I use the Power BI sample reports by Microsoft and obviEnce. In this post, I will use the Human Resources sample. The page New Hires Scorecard looks like this:

Custom Power BI Themes: Page Background Images - Original

Let’s change some background images!

Find an Image

Images are powerful. Background images should never take the focus away from the story you are trying to tell with your data. Instead, they should support your story, build your brand, or improve your visualizations.

The Page Background is the background of the report itself. I like to keep my reports as clean and simple as possible unless it is for something really special. (Nope, I could never build anything as cool as that!) If I use an image for the page background, it is usually a subtle gradient, a layout image, or a branding image with a specific design.

The Wallpaper is the outer part surrounding the report. This is where I personally like to go a little crazy :) I like to use more colorful gradients or photos that are slightly more abstract, like oceans, water, clouds, or grass.

I prefer using vector images like .svg because they will scale endlessly. If you use raster images like .jpg, .png, or .gif, make sure that the images are properly scaled and sized. You don’t want blurry, pixelated backgrounds!

Convert the image to Base64

I use Base64 Image Encoder because it is so easy to use. (And because I like Mr. Base. He looks nice.) In fact, I haven’t even looked into alternatives this time :) It supports the file types I need, I can upload multiple images if necessary, and it just gets the job done.

First, click to upload or drag & drop your images onto the website:

Custom Power BI Themes: Page Background Images - Base64 Encoder: Upload Image

Then, click copy image:

Custom Power BI Themes: Page Background Images - Base64 Encoder: Show Code

You can also click show code to see a thumbnail of the image. Then, click copy to clipboard:

Custom Power BI Themes: Page Background Images - Base64 Encoder: Copy Code

Now you have your image as a Base64 encoded string!

…ok, but what do we do with that string?

Copy the Base64 code into your JSON theme file

Just like when we changed the page background colors, we add the visualStyles section to our theme. Then, we define the page visual and use the asterisk * to apply the settings to all page styles. Finally, we define the background properties image and transparency. The image consists of a namescaling, and url.

Page Background Images

Replace <Base64 string goes here> with your Base64 encoded string:

{
    "name": "Page Background Image",
    "visualStyles": {
        "page": {
            "*": {
                "background": [
                    {
                        "image": {
                            "name": "Background",
                            "scaling": "Fit",
                            "url": "<Base64 string goes here>"
                        },
                        "transparency": 0
                    }
                ]
            }
        }
    }
}

If we save and apply this theme, our report will get a background image. I have used the Unsplash cloud image:

Custom Power BI Themes: Page Background Images - Highlighted Background

(Ew. Don’t do this. The image is squished and takes all focus away from the visualizations. But! It shows how to change the page background image. This is for illustration purposes only :) )

Wallpaper Background Images

To change the wallpaper, we use almost the same code as in the example above. The only difference is that we define the outspace instead of the background:

{
    "name": "Wallpaper Image",
    "visualStyles": {
        "page": {
            "*": {
                "outspace": [
                    {
                        "image": {
                            "name": "Wallpaper",
                            "scaling": "Fit",
                            "url": "<Base64 string goes here>"
                        },
                        "transparency": 0
                    }
                ]
            }
        }
    }
}

If we save and apply this theme, our report will get a wallpaper image instead:

Custom Power BI Themes: Page Background Images - Highlighted Wallpaper

Cathrine’s Full Theme File

When I merge the code from my page background colors post and this post, I end up with the following theme file:

{
    "name": "Cathrine Wilhelmsen - Light Theme",

    "dataColors": [
        "#980249",
        "#a95295",
        "#a78cd4",
        "#a8c3ff",
        "#6fb5e7",
        "#38a6c6",
        "#02949f",
        "#cccccc"
    ],

    "background": "#ffffff",
    "foreground": "#980249",
    "tableAccent": "#980249",

    "visualStyles": {
        "page": {
            "*": {
                "background": [
                    {
                        "color": {
                            "solid": {
                                "color": "#eeeeee"
                            }
                        }
                    }
                ],
                "outspace": [
                    {
                        "image": {
                            "name": "Gradient",
                            "scaling": "Fit",
                            "url": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzk4MDI0OSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMjk0OWYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgyPSIyNjQuNTgiIHkxPSIxNjQuNzEiIHkyPSIxNjQuNzEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMy43Nzk1MyAwIDAgMy43Nzk1MyAwIC04MjUuNTIpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeGxpbms6aHJlZj0iI2EiLz4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAwMCIgeT0iLTcwMyIgZmlsbD0idXJsKCNiKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA3MDMpIi8+Cjwvc3ZnPg=="
                        }
                    }
                ]
            }
        }
    }
}

When I apply my theme to the sample report, it will get a light gray background color and a gradient wallpaper image. In addition, the visualizations will use my custom color palette:

Custom Power BI Themes: Page Background Images - New Theme

My wallpaper looks pretty dramatic around a small report like the one above. On regular-sized reports, the effect is more subtle:

Custom Power BI Themes: Page Background Images - New Theme

Summary

In this blog post, we looked at how to change the page background images of Power BI reports using a custom theme. We defined the Page Background and the Wallpaper images. Stay tuned for the next blog post in this series! :)

About the Author

Cathrine Wilhelmsen is a Microsoft Data Platform MVP, BimlHero Certified Expert, Microsoft Certified Solutions Expert, international speaker, author, blogger, and chronic volunteer who loves teaching and sharing knowledge. She works as a Senior Business Intelligence Consultant at Inmeta, focusing on Azure Data and the Microsoft Data Platform. She loves sci-fi, chocolate, coffee, craft beers, ciders, cat gifs and smilies :)

Comments

Hi! This is Cathrine. Thank you so much for visiting my blog. I'd love to hear your thoughts, but please keep in mind that I'm not technical support for any products mentioned in this post :) Off-topic questions, comments and discussions may be moderated. Be kind to each other. Thanks!

I both love it.. and… “OMG base64.. what a hack…” but.. I love it!

This is great!! I wonder if we could take it a step further though. I currently add a clients company logo to report pages as an image, could we use this technique and somehow dynamically pull in the company logo to avoid having to import over and over for each page on each report? I do not want this in the background or wallpaper but as an image visual on each page

Did you find a solution for embedding an icon Dave?

Hi Catherine.
Thank you very much for this great article that I had integrated in my power bi templates… Sadly, things changed 3 days ago when I noticed that all my reports, and the related dashboards get KO. The reports do not display data anymore ! Yet, data do exist since I can export them in csv.
After many tests, it appears that the personalized theme was responsible for this failure. Weird ! Something has changed in the behavior of the theme json file but I can’t say what….
Have you encountered such issues ?
Best regards
Marc

Hi Marc, I haven’t run into this issue myself, so I unfortunately don’t know what might be causing it :/ If you find out, I would love to hear what it was!

HI.., Love your work.. Can you please explain how to change widget title Colour and how to add bottom border under title

Hi! This is Cathrine (again). Just a reminder. I'd love to hear your thoughts, but please keep in mind that I'm not technical support for any products mentioned in this post :) Off-topic questions, comments and discussions may be moderated. Be kind to each other. Thanks!

Leave a Reply to Greg Moore Cancel reply