Dashboard static elements using shapes and textboxes VS background

[karimm]

Hello,

In a report that existed when I joined my team, all the design was built using shapes (a lot of them).

This complicated development due to high number of elements, and the need to position elemenents manually or mistakenly moving them around.

And, as I read in multiple forums, there should be as few elements as possible on each page for performance reasons.

So I decided to use a background image that includes all the design and I started with a few pages.

Our UI designer created a background using Figma and we ended up with an SVG file of 4KB or a PNG of 12KB.

I applied the background on the pages and struggled a bit with scaling but that's a minor thing.

The main issue is that on pages where shapes are used, the design loads immediately and then the graphs appear. So the user can see the page design while waiting....

In contrast, on pages where I set the background as an image, a blank screen + chart Titles only appears first , and only afterwards do the remaining charts and elements get rendered. 

Does anyone have an idea why this happens and suggestions for which direction to take as best practice?

From loading times, is there any preference to using SVG or PNG or other file?

I have created a sample report to with dummy data to show the difference in how pages are rendered. But I'm not able to upload it.

So I'm adding here GIF showing the difference in rendering.

Our report is more than 40MB in size (and growing) and using import mode on Premium Capacity. The difference there is  far more noticeable.

[v-veshwara-msft]

Hi @karimm ,
We wanted to kindly follow up regarding your query. If you need any further assistance, please reach out.
Thank you.

[Greg_Deckler]

@karimm What happens if instead of a background image you create an image visual scaled to the entire page?

[karimm]

Thank you @Greg_Deckler for the suggestion and sorry for late reply.

I just got back to this issue due to priorities.

I noticed that when I try applying the same (1650px x 1619x) image to the canvas background (same size) and in an image stretched to the same size of the canvas background, I do see a difference in the rendering of the objects.

In both cases I put Normal scaling, and the images get rendered differently. In the canvas background it is more "streched".

I removed all the padding from the image visual and still, it's the same.

Any ideas?

Thanks again

[v-veshwara-msft]

Hi @karimm ,

Thanks for the update.

When using the same image in both the canvas background and as an image visual, differences in rendering like stretching could occur due to how Power BI handles image scaling in each context.

Even if both are set to "Normal" and sized the same, the canvas background may apply additional scaling based on the report canvas size and screen resolution.

In the image visual, padding removal is a good step, but the visual still respects margins and may slightly differ in alignment compared to the background layer.

You could try setting the image visual to "Fit" instead of "Normal" and then manually resize it to match the canvas area more precisely.

Alternatively, try exporting the background from Figma with a size closer to Power BI’s default canvas resolution (usually 1280x720 or 1920x1080) and then adjust as needed within the report.

Similar thread: 
Solved: Fill/fit options - page background picture - Microsoft Fabric Community

Page display settings in a Power BI report - Power BI | Microsoft Learn

Hope this helps. Please reach out for further assistance.

Thank you.

[v-veshwara-msft]

Hi @karimm ,

Just checking in to see if you query is resolved and if any responses were helpful.
Otherwise, feel free to reach out for further assistance.

Thank you.

[karimm]

Interesting! It seems to be behaving like the Shapes option 🙂

[v-veshwara-msft]

Hi @karimm ,

Thanks for sharing your findings.

Good to hear that using an image visual scaled to the entire page is working and behaves similar to shapes in terms of initial loading.

This seems to help address the issue of blank screen when using background images.

Thanks @Greg_Deckler  for suggesting that approach.

If there's anything else you need, feel free to reach out.

Also please consider marking the helpful reply as Accepted Solution if the issue is reolved, to help others with similar scenario.

Thank you.