Infobox background color html

I want to change the infobox background color with the html background tag. But it seems, that it does not work. Can someone confirm that?

Setting the background color with

.cesium-infoBox {
   background: rgba(255, 221, 0, 0.95);

works fine. But my problem is, that I need different background color depending on the infobox content. So I would like to set the background color together with the html content of the infobox.

Thanks for your help!


The infoBox has an iframe in it.
The iframe css is controlled by /Widgets/InfoBox/InfoBoxDescription.css

To override iframe contents, you will either need to add lines to this css file or create your own infobox, which I am now trying to do. Until then, I simply added this to the bottom of the infoBoxDescription.css file:

.cesium-infoBox-description, body, html { color: #000000; background-color: #FFF; }

.cesium-infoBox-description * { max-width:100%; word-wrap: break-word; word-break: break-word; }

.cesium-infoBox-defaultTable-lighter tr, .cesium-infoBox-defaultTable-lighter td { max-width:100%; }


See our infoBox here, demo:

and here:

Hope this helps,

Jim Lee

Climate Viewer 3D

I <3 Cesium

Was any progress made on this? I was trying to use some this example as a solution, but was unsuccessful:

        var cssLink = frameDocument.createElement("link");

        cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');

        cssLink.rel = "stylesheet";

        cssLink.type = "text/css";


I’ve discovered a solution which applies to my app, where I am creating entities from a geojson dataset.

As I iterate over the entities created from my dataset, I am dynamically populating the description property and wrapping those values with a div which has style explicitly set.

var dataSource = Cesium.GeoJsonDataSource.load(’…/data/quartier2.json’).then(function(data) {
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];

if (“description”)) {

entity.description = ‘

’ +