diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index 8ca9da246..03bbb64f4 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -289,16 +289,18 @@ input,
 
 .tl-background__wrapper {
 	z-index: var(--layer-background);
-}
-
-.tl-background {
 	position: absolute;
-	background-color: var(--color-background);
 	inset: 0px;
 	height: 100%;
 	width: 100%;
 }
 
+.tl-background {
+	background-color: var(--color-background);
+	width: 100%;
+	height: 100%;
+}
+
 /* --------------------- Grid Layer --------------------- */
 
 .tl-grid {
diff --git a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
index 9efa5b477..a752edb54 100644
--- a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
+++ b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
@@ -118,52 +118,50 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	])
 
 	return (
-		<>
+		<div
+			ref={rCanvas}
+			draggable={false}
+			className={classNames('tl-canvas', className)}
+			data-testid="canvas"
+			{...events}
+		>
+			<svg className="tl-svg-context">
+				<defs>
+					{shapeSvgDefs}
+					<CursorDef />
+					<CollaboratorHintDef />
+					{SvgDefs && <SvgDefs />}
+				</defs>
+			</svg>
 			{Background && (
 				<div className="tl-background__wrapper">
 					<Background />
 				</div>
 			)}
-			<div
-				ref={rCanvas}
-				draggable={false}
-				className={classNames('tl-canvas', className)}
-				data-testid="canvas"
-				{...events}
-			>
-				<svg className="tl-svg-context">
-					<defs>
-						{shapeSvgDefs}
-						<CursorDef />
-						<CollaboratorHintDef />
-						{SvgDefs && <SvgDefs />}
-					</defs>
-				</svg>
-				<GridWrapper />
-				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
-					<OnTheCanvasWrapper />
-					<SelectionBackgroundWrapper />
-					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
-				</div>
-				<div className="tl-overlays">
-					<div ref={rHtmlLayer2} className="tl-html-layer">
-						{debugGeometry ? <GeometryDebuggingView /> : null}
-						<HandlesWrapper />
-						<BrushWrapper />
-						<ScribbleWrapper />
-						<ZoomBrushWrapper />
-						<SelectedIdIndicators />
-						<HoveredShapeIndicator />
-						<HintedShapeIndicator />
-						<SnapIndicatorWrapper />
-						<SelectionForegroundWrapper />
-						<LiveCollaborators />
-					</div>
-					<InFrontOfTheCanvasWrapper />
-				</div>
-				<MovingCameraHitTestBlocker />
+			<GridWrapper />
+			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+				<OnTheCanvasWrapper />
+				<SelectionBackgroundWrapper />
+				{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 			</div>
-		</>
+			<div className="tl-overlays">
+				<div ref={rHtmlLayer2} className="tl-html-layer">
+					{debugGeometry ? <GeometryDebuggingView /> : null}
+					<HandlesWrapper />
+					<BrushWrapper />
+					<ScribbleWrapper />
+					<ZoomBrushWrapper />
+					<SelectedIdIndicators />
+					<HoveredShapeIndicator />
+					<HintedShapeIndicator />
+					<SnapIndicatorWrapper />
+					<SelectionForegroundWrapper />
+					<LiveCollaborators />
+				</div>
+				<InFrontOfTheCanvasWrapper />
+			</div>
+			<MovingCameraHitTestBlocker />
+		</div>
 	)
 }