diff --git a/src/ol/renderer/canvas/Layer.js b/src/ol/renderer/canvas/Layer.js
index 5e1f3c65ef..982d688caf 100644
--- a/src/ol/renderer/canvas/Layer.js
+++ b/src/ol/renderer/canvas/Layer.js
@@ -114,10 +114,11 @@ class CanvasLayerRenderer extends LayerRenderer {
       target.style.opacity === '' &&
       opacity === 1 &&
       (!opt_backgroundColor ||
-        equals(
-          asArray(target.style.backgroundColor),
-          asArray(opt_backgroundColor)
-        ))
+        (target.style.backgroundColor &&
+          equals(
+            asArray(target.style.backgroundColor),
+            asArray(opt_backgroundColor)
+          )))
     ) {
       const canvas = target.firstElementChild;
       if (canvas instanceof HTMLCanvasElement) {
diff --git a/test/rendering/cases/layer-vector-background-over/expected.png b/test/rendering/cases/layer-vector-background-over/expected.png
new file mode 100644
index 0000000000..5e2e080a2a
Binary files /dev/null and b/test/rendering/cases/layer-vector-background-over/expected.png differ
diff --git a/test/rendering/cases/layer-vector-background-over/main.js b/test/rendering/cases/layer-vector-background-over/main.js
new file mode 100644
index 0000000000..1a7c4ce369
--- /dev/null
+++ b/test/rendering/cases/layer-vector-background-over/main.js
@@ -0,0 +1,41 @@
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/Tile.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 XYZ from '../../../../src/ol/source/XYZ.js';
+import {Fill, Stroke, Style} from '../../../../src/ol/style.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0,
+      }),
+    }),
+    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();