diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index c43603046c0c08..4b5f5614d64c9f 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -96,6 +96,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 
 			$updated_style .= $styles['css'];
 			$tags->set_attribute( 'style', $updated_style );
+			$tags->add_class( 'has-background' );
 		}
 
 		return $tags->get_updated_html();
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 67373ecd0516ca..d093d3da55c8d6 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -137,6 +137,17 @@ function resetBackgroundSize( style = {}, setAttributes ) {
 	} );
 }
 
+/**
+ * Generates a CSS class name if an background image is set.
+ *
+ * @param {Object} style A block's style attribute.
+ *
+ * @return {string} CSS class name.
+ */
+export function getBackgroundImageClasses( style ) {
+	return hasBackgroundImageValue( style ) ? 'has-background' : '';
+}
+
 function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	const imgLabel = label || getFilename( imgUrl );
 	return (
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 5767db829d1b37..0995f877309cc2 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -24,6 +24,7 @@ import {
 	transformStyles,
 	shouldSkipSerialization,
 } from './utils';
+import { getBackgroundImageClasses } from './background';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import {
@@ -383,12 +384,27 @@ function useBlockProps( {
 		)?.color;
 	}
 
-	return addSaveProps( { style: extraStyles }, name, {
+	const saveProps = addSaveProps( { style: extraStyles }, name, {
 		textColor,
 		backgroundColor,
 		gradient,
 		style,
 	} );
+
+	const hasBackgroundValue =
+		backgroundColor ||
+		style?.color?.background ||
+		gradient ||
+		style?.color?.gradient;
+
+	return {
+		...saveProps,
+		className: classnames(
+			saveProps.className,
+			// Add background image classes in the editor, if not already handled by background color values.
+			! hasBackgroundValue && getBackgroundImageClasses( style )
+		),
+	};
 }
 
 export default {
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 9fa350ef36c4e0..92e1d2fc345a0e 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -134,7 +134,7 @@ public function data_background_block_support() {
 						'source' => 'file',
 					),
 				),
-				'expected_wrapper'    => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
 			),
 			'background image style with contain, position, and repeat is applied' => array(
@@ -151,7 +151,7 @@ public function data_background_block_support() {
 					'backgroundRepeat' => 'no-repeat',
 					'backgroundSize'   => 'contain',
 				),
-				'expected_wrapper'    => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
 			),
 			'background image style is appended if a style attribute already exists' => array(
@@ -166,8 +166,8 @@ public function data_background_block_support() {
 						'source' => 'file',
 					),
 				),
-				'expected_wrapper'    => '<div classname="wp-block-test" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
-				'wrapper'             => '<div classname="wp-block-test" style="color: red">Content</div>',
+				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div class="wp-block-test" style="color: red">Content</div>',
 			),
 			'background image style is appended if a style attribute containing multiple styles already exists' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',
@@ -181,8 +181,8 @@ public function data_background_block_support() {
 						'source' => 'file',
 					),
 				),
-				'expected_wrapper'    => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
-				'wrapper'             => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
+				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
 			),
 			'background image style is not applied if the block does not support background image' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',