How to change the WMS Background Color in OpenLayers?

Question

I am using geoserver to serve up an image pyramid basemap. I want to have all areas outside of the data extent be black (instead of white).

I have the map displayed inside of a div tag and changing the css on that tag or the container (another div) it resides in has no effect. I have checked both the geoserver and openlayers documentation, but have not seen any way to change the background color.

Any suggestions on where to continue searching? Do I need to generate a black tiles and serve them?

Answer 1

In the definition of the WMS layer in your OpenLayers JavaScript code, you can specify the parameter bgcolor. This will eventually add the BGCOLOR parameter to the URL to the WMS service as explained already. For example:

var osm = new OpenLayers.Layer.WMS(
    "OpenStreetMap",
    url,
    {
        width: '600',
        height: '400',
        srs: 'EPSG:3857',
        layers: 'OpenStreetMap',
        styles: '',
        format: 'image/png',
        bgcolor: '0x80BDE3'
     },
     {
        singleTile: true,
        ratio: 1,
        visibility: true,
        isBaseLayer: true
    }
);

Answer 2

You can set the background color in the WMS request, using the BGCOLOR param, with a hex value. Example: &BGCOLOR=0x000000