diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js
index 22e2f3b91a..6053d286f7 100644
--- a/src/gltf-component-mappings.js
+++ b/src/gltf-component-mappings.js
@@ -23,7 +23,6 @@ function registerRootSceneComponent(componentName) {
 }
 
 registerRootSceneComponent("fog");
-registerRootSceneComponent("background");
 
 AFRAME.GLTFModelPlus.registerComponent("duck", "duck", el => {
   el.setAttribute("duck", "");
@@ -599,6 +598,14 @@ AFRAME.GLTFModelPlus.registerComponent("audio-zone", "audio-zone", (el, componen
   el.setAttribute(componentName, { ...componentData });
 });
 
+AFRAME.GLTFModelPlus.registerComponent("background", "background", (el, _componentName, componentData) => {
+  console.warn(
+    "The `background` component is deprecated, use `backgroundColor` on the `environment-settings` component instead."
+  );
+  // This assumes the background component is on the root entity, which it is for spoke, the only thing using this component
+  el.setAttribute("environment-settings", { backgroundColor: new THREE.Color(componentData.color) });
+});
+
 AFRAME.GLTFModelPlus.registerComponent(
   "environment-settings",
   "environment-settings",