diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js
index a8f7ce6a4be1eb..578b58e3621022 100644
--- a/editor/js/Sidebar.Scene.js
+++ b/editor/js/Sidebar.Scene.js
@@ -424,7 +424,11 @@ function SidebarScene( editor ) {
 
 		if ( scene.environment ) {
 
-			if ( scene.environment.mapping === THREE.EquirectangularReflectionMapping ) {
+			if ( scene.background && scene.background.isTexture && scene.background.uuid === scene.environment.uuid ) {
+
+				environmentType.setValue( 'Background' );
+
+			} else if ( scene.environment.mapping === THREE.EquirectangularReflectionMapping ) {
 
 				environmentType.setValue( 'Equirectangular' );
 				environmentEquirectangularTexture.setValue( scene.environment );
@@ -563,6 +567,13 @@ function SidebarScene( editor ) {
 
 	} );
 
+	signals.sceneBackgroundChanged.add( function () {
+
+		onEnvironmentChanged();
+		refreshEnvironmentUI();
+
+	} );
+
 	return container;
 
 }
diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js
index 2253646e812255..126924602ac844 100644
--- a/editor/js/Viewport.js
+++ b/editor/js/Viewport.js
@@ -538,9 +538,13 @@ function Viewport( editor ) {
 
 				useBackgroundAsEnvironment = true;
 
-				scene.environment = scene.background;
-				scene.environment.mapping = THREE.EquirectangularReflectionMapping;
-				scene.environmentRotation.y = scene.backgroundRotation.y;
+				if ( scene.background !== null && scene.background.isTexture ) {
+
+					scene.environment = scene.background;
+					scene.environment.mapping = THREE.EquirectangularReflectionMapping;
+					scene.environmentRotation.y = scene.backgroundRotation.y;
+
+				}
 
 				break;