diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 3850a0e73d90a2..a052423f29da7f 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -13,8 +13,13 @@ iframe[name="editor-canvas"].is-zoomed-out {
margin-block: 0 calc(-100% / #{$scale});
}
-.block-editor-iframe__body {
- position: relative;
+.block-editor-iframe__html {
+ // Keeps body background styles from being clipped.
+ // See: https://github.com/WordPress/gutenberg/issues/44374#issuecomment-1260784743
+ height: auto;
+ // Keeps body background image from repeating.
+ // See: https://github.com/WordPress/gutenberg/issues/46782
+ min-height: 100%;
}
.block-editor-iframe__html.is-zoomed-out {
@@ -65,3 +70,7 @@ iframe[name="editor-canvas"].is-zoomed-out {
flex: 1;
}
}
+
+.block-editor-iframe__body {
+ position: relative;
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 6baf0d717101f2..543f3cedbc87bd 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -306,12 +306,6 @@ function Iframe( {
-
${ styles }
${ scripts }