diff --git a/examples/export-map.js b/examples/export-map.js
index a7f0dd1aa5..f33467988d 100644
--- a/examples/export-map.js
+++ b/examples/export-map.js
@@ -1,24 +1,29 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {
   Heatmap as HeatmapLayer,
-  Tile as TileLayer,
   Vector as VectorLayer,
 } from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
+      background: '#a9d3df',
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
         format: new GeoJSON(),
       }),
-      opacity: 0.5,
+      style: new Style({
+        stroke: new Stroke({
+          color: '#ccc',
+        }),
+        fill: new Fill({
+          color: 'white',
+        }),
+      }),
     }),
     new HeatmapLayer({
       source: new VectorSource({
@@ -51,6 +56,12 @@ document.getElementById('export-png').addEventListener('click', function () {
       map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
       function (canvas) {
         if (canvas.width > 0) {
+          const backgroundColor = canvas.parentNode.style.backgroundColor;
+          if (backgroundColor) {
+            mapContext.fillStyle = backgroundColor;
+            mapContext.fillRect(0, 0, canvas.width, canvas.height);
+          }
+
           const opacity =
             canvas.parentNode.style.opacity || canvas.style.opacity;
           mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js
index 663b9df498..0ff1effd2c 100644
--- a/src/ol/renderer/canvas/ImageLayer.js
+++ b/src/ol/renderer/canvas/ImageLayer.js
@@ -135,7 +135,12 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     const canvasTransform = toTransformString(this.pixelTransform);
 
-    this.useContainer(target, canvasTransform, layerState.opacity);
+    this.useContainer(
+      target,
+      canvasTransform,
+      layerState.opacity,
+      this.getBackground(frameState)
+    );
 
     const context = this.context;
     const canvas = context.canvas;
diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js
index edbacf1bcd..c83441b5f3 100644
--- a/src/ol/renderer/canvas/VectorLayer.js
+++ b/src/ol/renderer/canvas/VectorLayer.js
@@ -233,7 +233,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     const canvasTransform = transformToString(this.pixelTransform);
 
-    this.useContainer(target, canvasTransform, layerState.opacity);
+    this.useContainer(
+      target,
+      canvasTransform,
+      layerState.opacity,
+      this.getBackground(frameState)
+    );
     const context = this.context;
     const canvas = context.canvas;
 
diff --git a/test/rendering/cases/layer-vector-background/expected.png b/test/rendering/cases/layer-vector-background/expected.png
new file mode 100644
index 0000000000..6c7e4e7478
Binary files /dev/null and b/test/rendering/cases/layer-vector-background/expected.png differ
diff --git a/test/rendering/cases/layer-vector-background/main.js b/test/rendering/cases/layer-vector-background/main.js
new file mode 100644
index 0000000000..b5e7bed98b
--- /dev/null
+++ b/test/rendering/cases/layer-vector-background/main.js
@@ -0,0 +1,33 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {Fill, Stroke, Style} from '../../../../src/ol/style.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+  layers: [
+    new VectorLayer({
+      background: '#a9d3df',
+      source: new VectorSource({
+        url: '/data/countries.json',
+        format: new GeoJSON(),
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: '#ccc',
+        }),
+        fill: new Fill({
+          color: 'white',
+        }),
+      }),
+    }),
+  ],
+});
+
+render();
diff --git a/test/rendering/cases/layer-vectorimage-background/expected.png b/test/rendering/cases/layer-vectorimage-background/expected.png
new file mode 100644
index 0000000000..6c7e4e7478
Binary files /dev/null and b/test/rendering/cases/layer-vectorimage-background/expected.png differ
diff --git a/test/rendering/cases/layer-vectorimage-background/main.js b/test/rendering/cases/layer-vectorimage-background/main.js
new file mode 100644
index 0000000000..cf9fa36aaa
--- /dev/null
+++ b/test/rendering/cases/layer-vectorimage-background/main.js
@@ -0,0 +1,33 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import {Fill, Stroke, Style} from '../../../../src/ol/style.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+  layers: [
+    new VectorImageLayer({
+      background: '#a9d3df',
+      source: new VectorSource({
+        url: '/data/countries.json',
+        format: new GeoJSON(),
+      }),
+      style: new Style({
+        stroke: new Stroke({
+          color: '#ccc',
+        }),
+        fill: new Fill({
+          color: 'white',
+        }),
+      }),
+    }),
+  ],
+});
+
+render();