diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 70957897229595..acecf5dcbcea80 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -67,7 +67,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 	}
 
 	$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
-
+var_dump( $block_attributes['style']['background'] );
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.
 		$tags = new WP_HTML_Tag_Processor( $block_content );
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 77004253bea868..21d2fc59037bff 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -223,6 +223,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' ),
@@ -488,10 +489,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 f45c787e45589b..38b63c8a98e11b 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -191,6 +191,7 @@ function BackgroundImageToolsPanelItem( {
 	onChange,
 	style,
 	inheritedValue,
+	settings,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -201,6 +202,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 );
@@ -275,10 +283,21 @@ function BackgroundImageToolsPanelItem( {
 		};
 	}, [] );
 
+	const toggleScrollWithPage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundAttachment' ],
+				attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+			)
+		);
+
 	const hasValue = hasBackgroundImageValue( style );
 
 	return (
-		<ToolsPanelItem
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 4 }
 			className="single-column"
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
@@ -329,7 +348,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>
 	);
 }
 
@@ -577,6 +608,7 @@ export default function BackgroundPanel( {
 				isShownByDefault={ defaultControls.backgroundImage }
 				style={ value }
 				inheritedValue={ inheritedValue }
+				settings={ settings }
 			/>
 			{ shouldShowBackgroundSizeControls && (
 				<BackgroundSizeToolsPanelItem
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 3d47f42645afca..98b23d26ff5b13 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: false,
 			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 2addf109873aae..8ec1521d60bc1d 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -36,12 +36,20 @@ export default function BackgroundPanel() {
 			!! inheritedStyle?.background?.backgroundImage,
 	};
 
+	const updatedSettings = {
+		...settings,
+		background: {
+			...settings.background,
+			backgroundAttachment: true,
+		},
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
-			settings={ settings }
+			settings={ updatedSettings }
 			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 272c12705bf880..41ea425028ab95 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 748cb15b4f3099..d7e89d8c5ba422 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -66,6 +66,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 ) => {
@@ -80,6 +92,7 @@ const backgroundSize = {
 
 export default [
 	backgroundImage,
+	backgroundAttachment,
 	backgroundPosition,
 	backgroundRepeat,
 	backgroundSize,