Set the background color of a Power BI Embedded IFrame

When the IFrame size that's allocated for an embedded object and the embedded object itself don't share the same aspect ratio, the result is gray margins on the sides (marked in red in the following figure). [](https://powerbicdn.azureedge.net/mediahandler/blog/media/PowerBI/blog/03aff6c2-6530-4d93-88c4-646279238838.png) You can use the [Custom Layout API](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Custom-Layout) to define how to fill the IFrame or set a fixed size for the object at any time. But that sometimes doesn't entirely fix the appearance of the gray margins. You can now [set the background color of the IFrame](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Transparent-Background) by making it transparent. By doing so, you'll give the IFrame the defined color of the DIV element that contains the IFrame. You have full control of what color/background layout will be seen in the margins, making the embedded object wrapped entirely by the application design. Note that the default color is still gray, so you'll need to set a definition in the JavaScript code to get the transparency of the IFrame. * Power BI Embedded * Features * [ Power BI Embedded](https://azure.microsoft.com/en-gb/products/power-bi-embedded/)