Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
tmcdevitt
Advocate II
Advocate II

Setting the iframe background for embedded reports (default gray color is terrible)

We're embedding PowerBI reports in a custom application we're building. For the most part, this is working great. However, we can't figure out how to set the background color of the iframe in which reports are getting embedded. Note: we're not talking about the background color of the report. Instead, we're talking about the padding between the borders of the iframe and the report content. See attached image. From what we can tell, there's no way to set this from Desktop or from the embed calls we're making.

Ideally, we'd be able to reference an external CSS or something that would be used within the iframe of the report but that doesn't appear to be an option (and obviously, we can't control the styling of elements within the iframe from our application).

 

power_bi_embed_background.jpg

24 REPLIES 24
juan_pablo
Advocate III
Advocate III

Use the Wallpaper setting section in the Format Pane and set the wallpaper color to black or #000000 or the color you wish. That would be the color of the iframe.

tomepenn
New Member

Gentlemen, could someone please confirm that this is fixed on the PowerBI Embedded report?

Is this the correct code:  

config.settings.background = models.BackgroundType.Transparent;

 

Thanks

Tom

donquijote
Advocate IV
Advocate IV

I tested this feature and I find a bad behavior.

When making the background transparent, If a visual in the report is maximized with "Focus Mode" the whole dashboard remains on the background behind the maximized visual.

This seems a bug.

Thanks for bringing this to our attention.

We are working to fix this bug, and we will update on ETA for the fix later on.

any updates on when this fix will be out?

We already fixed it, you should see it in production next week.

We design reports with backgraound images. I tried to use Tranceparent Background type in order to remove gray backgorund, but this type hides background images as well. Any suggestion?

a_lafont
New Member

Transparent background is now available and you only have to add this :

config.settings.background = models.BackgroundType.Transparent;
alter
Regular Visitor

I am also waiting for this, updates?

I am not sure when this was released, but it's documented now:

 

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details#settings

 

See "Transparent Background"

emma_s
Helper I
Helper I

Hi, is there any update on this please? The January release blog post points me to the demo > custom layout. I've looked through this but can only see that it regulates x and y position, plus visibility. I can't see how to remove the gray shading. Can anyone advise if this is possible yet?

 

The gray shading seems driven by the ratio (height/width) of the visual. At some ratios, the gray is top/bottom, but at some point the gray moves left/right. The size of the embedded visual appears to be standard, and not driven by the originating report.

 

It would therefore be very useful to have the default size or ratio of Power BI standard visuals. Is this available anywhere?

Hi,

We are working on an additional solution to go out at the beginning of May,

and will allow to set the iFrame background as 'transparent', giving him the color defined on the DIV element.

That will give developers total control on the color of themargins, in addition to the optimization you can do to the size of the object using the 'Custom Layout' API. 

Is there any update? I have been waiting out for this feature for a while. 

Hi - Any update?

tmcdevitt
Advocate II
Advocate II

Hey guys,

   Any update on this issue? Someone had mentioned this might be fixed "soon". Really hoping that's for the January release. We're trying to launch some of our embedded reports to actual users in early February and this gray background issue makes things look less professional than we'd like.

   Thanks.

 

- Terence

See January blog post- https://powerbi.microsoft.com/en-us/blog/power-bi-developer-community-january-update/

 

Look for 'Custom layout' feature.

I can see nothing about changing bg color...  only a page size, or controlling visual sizes, position and visibility 😞 _ _ _ _ _ 

I am not seeing anything about changing bg color only the page size, or controlling visual sizes, position and visibility ;(......

jimmcslim
Helper III
Helper III

Hi Nimrod,

 

Thanks for the update. The sooner this is available, plus the resizing support you mentioned, the better!

 

Just a question - where will the availability of this feature be communicated? Via this forum (which I don't monitor frequently) or via the Power BI blog (which I do monitor daily!).

We are updating on all our new feature in our developers monthly blog posts.

Be sure to check there, that should get you covered.

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.