diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index d56699cb15c6a..fce2c9b13724b 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -396,15 +396,27 @@ export function getStylesDeclarations(
 
 	/*
 	 * Preprocess background image values.
-	 * 1. Sets default values for blocks (not root).
-	 * 2. .
 	 *
-	 * Note: A refactor is for the style engine to handle ref resolution (and possibly defaults)
+	 * Note: As we absorb more and more styles into the engine, we could simplify this function.
+	 * A refactor is for the style engine to handle ref resolution (and possibly defaults)
 	 * via a public util used internally and externally. Theme.json tree and defaults could be passed
 	 * as options.
 	 */
 	if ( !! blockStyles.background ) {
-		// 1. Set default values for block styles except the top-level site background
+		/*
+		 * Resolve dynamic values before they are compiled by the style engine,
+		 * which doesn't (yet) resolve dynamic values.
+		 */
+		if ( blockStyles.background?.backgroundImage?.ref ) {
+			const refPath =
+				blockStyles.background.backgroundImage.ref.split( '.' );
+			blockStyles.background.backgroundImage = getValueFromObjectPath(
+				tree,
+				refPath
+			);
+		}
+
+		// Set default values for block styles except the top-level site background
 		if ( ! isRoot ) {
 			blockStyles = {
 				...blockStyles,
@@ -414,25 +426,8 @@ export function getStylesDeclarations(
 				},
 			};
 		}
-
-		/*
-		 * 2. Resolve dynamic values before they are compiled by the style engine,
-		 * which doesn't (yet) resolve dynamic values.
-		 */
-		if ( blockStyles.background?.backgroundImage?.ref ) {
-			if ( typeof blockStyles.background.backgroundImage !== 'string' ) {
-				const refPath =
-					blockStyles.background.backgroundImage.ref.split( '.' );
-				blockStyles.background.backgroundImage = getValueFromObjectPath(
-					tree,
-					refPath
-				);
-			}
-		}
 	}
 
-	// The goal is to move everything to server side generated engine styles
-	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index cd0b017831b79..0642641aa1787 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -63,7 +63,7 @@ export function setBackgroundStyleDefaults( backgroundStyle ) {
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( !! backgroundImage?.url ) {
+	if ( !! backgroundImage?.url || typeof backgroundImage === 'string' ) {
 		if ( ! backgroundStyle?.backgroundSize ) {
 			backgroundStylesWithDefaults = {
 				backgroundSize: 'cover',