diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index a5358388e89c7..a16a01956f5a8 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -264,6 +264,16 @@ function ScreenBlock( { name, variation } ) {
 					settings={ settings }
 				/>
 			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
+				/>
+			) }
 			{ hasTypographyPanel && (
 				<StylesTypographyPanel
 					inheritedValue={ inheritedStyle }
@@ -306,17 +316,6 @@ function ScreenBlock( { name, variation } ) {
 				/>
 			) }
 
-			{ hasBackgroundPanel && (
-				<StylesBackgroundPanel
-					inheritedValue={ inheritedStyle }
-					value={ style }
-					onChange={ setStyle }
-					settings={ settings }
-					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
-				/>
-			) }
-
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
 					<p>