diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 29f1b17d7bb23..e2e544a2e49af 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -17,6 +17,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"backgroundSize": {
+			"type": "string",
+			"default": "cover"
+		},
 		"dimRatio": {
 			"type": "number",
 			"default": 50
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index ff9d9f8cd6eb4..27d5a9c495e9e 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -20,6 +20,9 @@ import {
 	Spinner,
 	ToggleControl,
 	withNotices,
+	ButtonGroup,
+	SelectControl,
+	__experimentalUnitControl as BaseUnitControl,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
@@ -52,6 +55,7 @@ import {
 	VIDEO_BACKGROUND_TYPE,
 	COVER_MIN_HEIGHT,
 	CSS_UNITS,
+	SIZE_OPTIONS,
 	backgroundImageStyles,
 	dimRatioToClass,
 	isContentPositionCenter,
@@ -82,11 +86,172 @@ function retrieveFastAverageColor() {
 	return retrieveFastAverageColor.fastAverageColor;
 }
 
-function CoverHeightInput( {
+function CustomSizeControl( { value, onSelect } ) {
+	let initMode = value.search( /auto/ );
+	if ( initMode < 1 ) {
+		initMode = 'both';
+	} else if ( initMode === 0 ) {
+		initMode = 'width';
+	} else {
+		initMode = 'height';
+	}
+
+	const [ currentMode, setMode ] = useState( initMode );
+
+	const customUnits = [
+		{ value: 'px', label: 'px', default: 0 },
+		{ value: '%', label: '%', default: 10 },
+	];
+
+	// Split and pick up values + units from the CSS inline.
+	let wh =
+		value &&
+		value
+			.replace( /auto/, '50%' )
+			.split( /(\d+|%|px|auto)/ )
+			.filter( ( v ) => !! v && v !== ' ' );
+
+	// default values.
+	if ( wh.length < 2 ) {
+		wh = [ '50', '%', '50', '%' ];
+	}
+
+	function customSizeHandler( data ) {
+		const { mode, w, wu, h, hu } = data;
+
+		if ( mode ) {
+			setMode( mode );
+		}
+
+		let inlineStyle = '';
+		switch ( mode || currentMode ) {
+			case 'width':
+				inlineStyle = `${ w || wh[ 0 ] }${ wu || wh[ 1 ] } auto`;
+				break;
+
+			case 'height':
+				inlineStyle = `auto ${ h || wh[ 2 ] }${ hu || wh[ 3 ] }`;
+				break;
+
+			case 'both':
+				inlineStyle =
+					`${ w || wh[ 0 ] }${ wu || wh[ 1 ] } ` +
+					`${ h || wh[ 2 ] }${ hu || wh[ 3 ] }`;
+				break;
+		}
+
+		onSelect( inlineStyle );
+	}
+
+	return (
+		<Fragment>
+			<SelectControl
+				label={ __( 'Size mode' ) }
+				options={ [
+					{
+						value: 'width',
+						label: __( 'Width' ),
+					},
+					{
+						value: 'height',
+						label: __( 'Height' ),
+					},
+					{
+						value: 'both',
+						label: __( 'Width & Height' ),
+					},
+				] }
+				value={ currentMode }
+				onChange={ ( newMode ) =>
+					customSizeHandler( { mode: newMode } )
+				}
+				labelPosition="top"
+			/>
+
+			<div className="background-size-custom-options">
+				{ ( currentMode === 'width' || currentMode === 'both' ) && (
+					<CoverValueUnitInput
+						label={ __( 'Width' ) }
+						value={ wh[ 0 ] }
+						unit={ wh[ 1 ] }
+						units={ customUnits }
+						onChange={ ( w ) => customSizeHandler( { w } ) }
+						onUnitChange={ ( wu ) => customSizeHandler( { wu } ) }
+						customUnits={ false }
+					/>
+				) }
+
+				{ ( currentMode === 'height' || currentMode === 'both' ) && (
+					<CoverValueUnitInput
+						label={ __( 'Height' ) }
+						value={ wh[ 2 ] }
+						unit={ wh[ 3 ] }
+						units={ customUnits }
+						onChange={ ( h ) => customSizeHandler( { h } ) }
+						onUnitChange={ ( hu ) => customSizeHandler( { hu } ) }
+						customUnits={ false }
+					/>
+				) }
+			</div>
+		</Fragment>
+	);
+}
+
+/**
+ * Helper function to fetect if the given size is custom or not.
+ *
+ * @param {string} size - Background size
+ * @return {boolean} True if size is custom. Otherwise, False.
+ */
+export function isCustomSize( size ) {
+	return (
+		SIZE_OPTIONS.map( ( opt ) => opt.slug ).indexOf( size ) < 0 ||
+		size === 'custom'
+	);
+}
+
+function BackgroundSizeControl( { size = 'cover', onSelect } ) {
+	return (
+		<Fragment>
+			<BaseControl
+				label={ __( ' Background size' ) }
+				id={ 'background-size' }
+			>
+				<ButtonGroup
+					label={ __( 'Size' ) }
+					defaultChecked="size-content"
+					className="background-size-options"
+				>
+					{ SIZE_OPTIONS.map( ( { slug, label, icon: sizeIcon } ) => (
+						<Button
+							key={ slug }
+							icon={ sizeIcon }
+							label={ label }
+							isPressed={
+								slug === size ||
+								( slug === 'custom' && isCustomSize( size ) )
+							}
+							onClick={ () => onSelect( slug ) }
+						/>
+					) ) }
+				</ButtonGroup>
+			</BaseControl>
+			{ isCustomSize( size ) && (
+				<CustomSizeControl value={ size } onSelect={ onSelect } />
+			) }
+		</Fragment>
+	);
+}
+
+function CoverValueUnitInput( {
 	onChange,
 	onUnitChange,
 	unit = 'px',
 	value = '',
+
+	label,
+	units = CSS_UNITS,
+	customUnits = true,
 } ) {
 	const [ temporaryInput, setTemporaryInput ] = useState( null );
 	const instanceId = useInstanceId( UnitControl );
@@ -119,21 +284,29 @@ function CoverHeightInput( {
 	const inputValue = temporaryInput !== null ? temporaryInput : value;
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
+	const controlUnitProps = {
+		id: inputId,
+		min,
+		onBlur: handleOnBlur,
+		onChange: handleOnChange,
+		onUnitChange,
+		step: '1',
+		style: { maxWidth: 80 },
+		unit,
+		units,
+		value: inputValue,
+	};
+
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onBlur={ handleOnBlur }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				step="1"
-				style={ { maxWidth: 80 } }
-				unit={ unit }
-				units={ CSS_UNITS }
-				value={ inputValue }
-			/>
+		<BaseControl label={ label } id={ inputId }>
+			{ customUnits ? (
+				<UnitControl isResetValueOnUnitChange { ...controlUnitProps } />
+			) : (
+				<BaseUnitControl
+					isResetValueOnUnitChange
+					{ ...controlUnitProps }
+				/>
+			) }
 		</BaseControl>
 	);
 }
@@ -247,6 +420,7 @@ function CoverEdit( {
 		contentPosition,
 		id,
 		backgroundType,
+		backgroundSize,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -264,6 +438,16 @@ function CoverEdit( {
 	const onSelectMedia = attributesFromMedia( setAttributes );
 	const isBlogUrl = isBlobURL( url );
 
+	// Store the previous background custom size.
+	const [ prevBackgroundSize, setPrevbackgroundSize ] = useState();
+	useEffect( () => {
+		if ( ! isCustomSize( backgroundSize ) ) {
+			return;
+		}
+
+		setPrevbackgroundSize( backgroundSize );
+	}, [ backgroundSize ] );
+
 	const toggleParallax = () => {
 		setAttributes( {
 			hasParallax: ! hasParallax,
@@ -299,6 +483,7 @@ function CoverEdit( {
 		...( isImageBackground ? backgroundImageStyles( url ) : {} ),
 		backgroundColor: overlayColor.color,
 		minHeight: temporaryMinHeight || minHeightWithUnit || undefined,
+		backgroundSize,
 	};
 
 	if ( gradientValue && ! url ) {
@@ -360,6 +545,19 @@ function CoverEdit( {
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }
 								/>
+
+								<BackgroundSizeControl
+									size={ backgroundSize }
+									onSelect={ ( newSize ) => {
+										setAttributes( {
+											backgroundSize:
+												newSize === 'custom' &&
+												!! prevBackgroundSize
+													? prevBackgroundSize
+													: newSize,
+										} );
+									} }
+								/>
 							</Fragment>
 						) }
 						{ showFocalPointPicker && (
@@ -399,7 +597,7 @@ function CoverEdit( {
 				{ hasBackground && (
 					<>
 						<PanelBody title={ __( 'Dimensions' ) }>
-							<CoverHeightInput
+							<CoverValueUnitInput
 								value={ temporaryMinHeight || minHeight }
 								unit={ minHeightUnit }
 								onChange={ ( newMinHeight ) =>
@@ -410,6 +608,7 @@ function CoverEdit( {
 										minHeightUnit: nextUnit,
 									} );
 								} }
+								label={ __( 'Minimum height of cover' ) }
 							/>
 						</PanelBody>
 						<PanelColorGradientSettings
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index cc9f1d44ab84a..84e2ec387535a 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -25,6 +25,8 @@ import {
 	getPositionClassName,
 } from './shared';
 
+import { isCustomSize } from './edit';
+
 export default function save( { attributes } ) {
 	const {
 		backgroundType,
@@ -40,6 +42,7 @@ export default function save( { attributes } ) {
 		url,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		backgroundSize,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -65,6 +68,11 @@ export default function save( { attributes } ) {
 	}
 	style.minHeight = minHeight || undefined;
 
+	const hasCustomBackgroundSize = isCustomSize( backgroundSize );
+	if ( hasCustomBackgroundSize ) {
+		style.backgroundSize = backgroundSize;
+	}
+
 	let positionValue;
 
 	if ( focalPoint ) {
@@ -93,6 +101,10 @@ export default function save( { attributes } ) {
 			'has-custom-content-position': ! isContentPositionCenter(
 				contentPosition
 			),
+			'has-background-size': backgroundSize,
+			[ ! hasCustomBackgroundSize
+				? `is-${ backgroundSize }-background-size`
+				: null ]: ! hasCustomBackgroundSize,
 		},
 		getPositionClassName( contentPosition )
 	);
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index a80ce7d28c870..265020dbd21a7 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -4,6 +4,7 @@
 import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
+import { SVG, Rect } from '@wordpress/components';
 
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
@@ -55,6 +56,72 @@ export const CSS_UNITS = [
 	},
 ];
 
+export const SIZE_OPTIONS = [
+	{
+		slug: 'cover',
+		label: __( 'Cover' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect height="20" width="20" y="2" x="2" />
+			</SVG>
+		),
+	},
+	{
+		slug: 'contain',
+		label: __( 'Contain' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect
+					x="2"
+					y="2"
+					fill="none"
+					width="20"
+					height="20"
+					stroke="currentColor"
+					strokeWidth="1"
+				/>
+				<Rect x="7" y="2" width="10" height="20" />
+			</SVG>
+		),
+	},
+	{
+		slug: 'initial',
+		label: __( 'Original' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect
+					x="2"
+					y="2"
+					fill="none"
+					width="20"
+					height="20"
+					stroke="currentColor"
+					strokeWidth="1"
+				/>
+				<Rect x="8" y="4" width="8" height="16" />
+			</SVG>
+		),
+	},
+	{
+		slug: 'custom',
+		label: __( 'Custom' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Rect
+					x="2"
+					y="2"
+					fill="none"
+					width="20"
+					height="20"
+					stroke="currentColor"
+					strokeWidth="1"
+				/>
+				<Rect x="7" y="8" width="10" height="8" />
+			</SVG>
+		),
+	},
+];
+
 export function dimRatioToClass( ratio ) {
 	return ratio === 0 || ratio === 50 || ! ratio
 		? null
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 1f4f09f9fc9c1..5cdd114f5b98b 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,10 +1,6 @@
 .wp-block-cover-image,
 .wp-block-cover {
 	position: relative;
-	background-size: cover;
-	background-position: center center;
-	min-height: 430px;
-	height: 100%;
 	width: 100%;
 	display: flex;
 	justify-content: center;
@@ -13,6 +9,13 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	// Default settings values.
+	min-height: 430px;
+	height: 100%;
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+
 	&.has-parallax {
 		background-attachment: fixed;
 
@@ -31,7 +34,18 @@
 
 	&.is-repeated {
 		background-repeat: repeat;
-		background-size: auto;
+	}
+
+	&.is-cover-background-size {
+		background-size: cover;
+	}
+
+	&.is-contain-background-size {
+		background-size: contain;
+	}
+
+	&.is-initial-background-size {
+		background-size: initial;
 	}
 
 	/**
@@ -180,6 +194,36 @@
 	object-fit: cover;
 }
 
+// Tweak block settings sidebar.
+.components-button-group.background-size-options {
+	display: flex;
+	.components-button {
+		box-shadow: 0 0 1px inset;
+	}
+}
+
+.background-size-custom-options {
+	display: flex;
+
+	.components-base-control:first-child {
+		margin-right: 10px;
+		margin-bottom: 8px;
+	}
+
+	.components-base-control__field {
+		display: flex;
+		align-items: center;
+
+		.components-base-control__label {
+			margin: 0 12px 0 0;
+		}
+	}
+
+	.components-unit-control-wrapper {
+		width: 65px;
+	}
+}
+
 // Styles bellow only exist to support older versions of the block.
 // Versions that not had inner blocks and used an h2 heading had a section (and not a div) with a class wp-block-cover-image (and not a wp-block-cover).
 // We are using the previous referred differences to target old versions.