diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 8e3c06159a120..1455d12fe883c 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -56,9 +56,10 @@ function gutenberg_render_background_support( $block_content, $block ) {
 	$background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array();
 
 	if ( ! empty( $background_styles['backgroundImage'] ) ) {
-		$background_styles['backgroundSize']     = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
-		$background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
-		$background_styles['backgroundRepeat']   = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
+		$background_styles['backgroundSize']       = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover';
+		$background_styles['backgroundPosition']   = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null;
+		$background_styles['backgroundRepeat']     = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null;
+		$background_styles['backgroundAttachment'] = isset( $block_attributes['style']['background']['backgroundAttachment'] ) ? $block_attributes['style']['background']['backgroundAttachment'] : null;
 
 		// If the background size is set to `contain` and no position is set, set the position to `center`.
 		if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index a1e79a56a683b..11a506a416bb5 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -234,6 +234,7 @@ class WP_Theme_JSON_Gutenberg {
 		'background-position'               => array( 'background', 'backgroundPosition' ),
 		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
 		'background-size'                   => array( 'background', 'backgroundSize' ),
+		'background-attachment'             => array( 'background', 'backgroundAttachment' ),
 		'border-radius'                     => array( 'border', 'radius' ),
 		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
 		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
@@ -502,10 +503,11 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => 'top',
-			'backgroundPosition' => 'top',
-			'backgroundRepeat'   => 'top',
-			'backgroundSize'     => 'top',
+			'backgroundImage'      => 'top',
+			'backgroundAttachment' => 'top',
+			'backgroundPosition'   => 'top',
+			'backgroundRepeat'     => 'top',
+			'backgroundSize'       => 'top',
 		),
 		'border'     => array(
 			'color'  => null,
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 7f3c3ed27e667..7d85f6cbaf282 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -195,6 +195,7 @@ function BackgroundImageToolsPanelItem( {
 	style,
 	inheritedValue,
 	themeFileURIs,
+	settings,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -205,6 +206,13 @@ function BackgroundImageToolsPanelItem( {
 		...inheritedValue?.background?.backgroundImage,
 	};
 
+	const shouldShowBackgroundAttachmentControls =
+		settings?.background?.backgroundAttachment;
+
+	const attachmentValue = style?.background?.backgroundAttachment || {
+		...inheritedValue?.background?.backgroundAttachment,
+	};
+
 	const replaceContainerRef = useRef();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -289,6 +297,15 @@ function BackgroundImageToolsPanelItem( {
 		};
 	}, [] );
 
+	const toggleScrollWithPage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundAttachment' ],
+				attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+			)
+		);
+
 	const hasValue = hasBackgroundImageValue( style );
 
 	const closeAndFocus = () => {
@@ -309,7 +326,9 @@ function BackgroundImageToolsPanelItem( {
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
 
 	return (
-		<ToolsPanelItem
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 4 }
 			className="single-column"
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
@@ -366,7 +385,19 @@ function BackgroundImageToolsPanelItem( {
 					label={ __( 'Drop to upload' ) }
 				/>
 			</div>
-		</ToolsPanelItem>
+			{ shouldShowBackgroundAttachmentControls && (
+				<div className="block-editor-global-styles-background-panel__attachment">
+					<ToggleControl
+						label={ __( 'Scroll with page' ) }
+						checked={ attachmentValue !== 'fixed' }
+						onChange={ toggleScrollWithPage }
+						help={ __(
+							'Whether your image should scroll with the page or stay fixed in place.'
+						) }
+					/>
+				</div>
+			) }
+		</VStack>
 	);
 }
 
@@ -646,6 +677,7 @@ export default function BackgroundPanel( {
 				style={ value }
 				inheritedValue={ inheritedValue }
 				themeFileURIs={ themeFileURIs }
+                settings={ settings }
 			/>
 			{ shouldShowBackgroundSizeControls && (
 				<BackgroundSizeToolsPanelItem
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 3e23efcbf5fc9..fcf452bbb13b5 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -162,6 +162,7 @@ export function BackgroundImagePanel( {
 		...settings,
 		background: {
 			...settings.background,
+			backgroundAttachment: true,
 			backgroundSize:
 				settings?.background?.backgroundSize &&
 				hasBackgroundSupport( name, 'backgroundSize' ),
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index 8a372587bc66e..bb7b895d7e4e5 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -52,12 +52,20 @@ export default function BackgroundPanel() {
 			hasBackgroundImageValue( inheritedStyle ),
 	};
 
+	const updatedSettings = {
+		...settings,
+		background: {
+			...settings.background,
+			backgroundAttachment: true,
+		},
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
-			settings={ settings }
+			settings={ updatedSettings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
 			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 272c12705bf88..41ea425028ab9 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -42,26 +42,32 @@ final class WP_Style_Engine {
 		 */
 		const BLOCK_STYLE_DEFINITIONS_METADATA = array(
 			'background' => array(
-				'backgroundImage'    => array(
+				'backgroundImage'      => array(
 					'property_keys' => array(
 						'default' => 'background-image',
 					),
 					'value_func'    => array( self::class, 'get_url_or_value_css_declaration' ),
 					'path'          => array( 'background', 'backgroundImage' ),
 				),
-				'backgroundPosition' => array(
+				'backgroundAttachment' => array(
+					'property_keys' => array(
+						'default' => 'background-attachment',
+					),
+					'path'          => array( 'background', 'backgroundAttachment' ),
+				),
+				'backgroundPosition'   => array(
 					'property_keys' => array(
 						'default' => 'background-position',
 					),
 					'path'          => array( 'background', 'backgroundPosition' ),
 				),
-				'backgroundRepeat'   => array(
+				'backgroundRepeat'     => array(
 					'property_keys' => array(
 						'default' => 'background-repeat',
 					),
 					'path'          => array( 'background', 'backgroundRepeat' ),
 				),
-				'backgroundSize'     => array(
+				'backgroundSize'       => array(
 					'property_keys' => array(
 						'default' => 'background-size',
 					),
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 6e79636cfda12..0a578fde66da2 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -62,6 +62,18 @@ const backgroundRepeat = {
 	},
 };
 
+const backgroundAttachment = {
+	name: 'backgroundAttachment',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundAttachment' ],
+			'backgroundAttachment'
+		);
+	},
+};
+
 const backgroundSize = {
 	name: 'backgroundSize',
 	generate: ( style: Style, options: StyleOptions ) => {
@@ -76,6 +88,7 @@ const backgroundSize = {
 
 export default [
 	backgroundImage,
+	backgroundAttachment,
 	backgroundPosition,
 	backgroundRepeat,
 	backgroundSize,