diff --git a/src/ol/renderer/canvas/Layer.js b/src/ol/renderer/canvas/Layer.js
index 6eedbce160..99e69b5e36 100644
--- a/src/ol/renderer/canvas/Layer.js
+++ b/src/ol/renderer/canvas/Layer.js
@@ -155,7 +155,8 @@ class CanvasLayerRenderer extends LayerRenderer {
       target.style.opacity === '' &&
       opacity === 1 &&
       (!opt_backgroundColor ||
-        (target.style.backgroundColor &&
+        (target &&
+          target.style.backgroundColor &&
           equals(
             asArray(target.style.backgroundColor),
             asArray(opt_backgroundColor)
@@ -184,9 +185,6 @@ class CanvasLayerRenderer extends LayerRenderer {
       style.position = 'absolute';
       style.width = '100%';
       style.height = '100%';
-      if (opt_backgroundColor) {
-        style.backgroundColor = opt_backgroundColor;
-      }
       context = createCanvasContext2D();
       const canvas = context.canvas;
       container.appendChild(canvas);
@@ -197,6 +195,13 @@ class CanvasLayerRenderer extends LayerRenderer {
       this.container = container;
       this.context = context;
     }
+    if (
+      !this.containerReused &&
+      opt_backgroundColor &&
+      !this.container.style.backgroundColor
+    ) {
+      this.container.style.backgroundColor = opt_backgroundColor;
+    }
   }
 
   /**
diff --git a/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
index f30d43d55b..d2537d1f96 100644
--- a/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ b/test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
@@ -318,6 +318,24 @@ describe('ol/renderer/canvas/VectorTileLayer', function () {
         done();
       });
     });
+
+    it('changes background when function returns a different color', function (done) {
+      let first = true;
+      layer.setBackground(function (resolution) {
+        expect(resolution).to.be(map.getView().getResolution());
+        const background = first === true ? undefined : 'rgba(255, 0, 0, 0.5)';
+        first = false;
+        return background;
+      });
+      map.once('rendercomplete', function () {
+        expect(layer.getRenderer().container.style.backgroundColor).to.be('');
+        map.renderSync();
+        expect(layer.getRenderer().container.style.backgroundColor).to.be(
+          'rgba(255, 0, 0, 0.5)'
+        );
+        done();
+      });
+    });
   });
 
   describe('#prepareFrame', function () {