diff --git a/extensions/media-preview/media/imagePreview.css b/extensions/media-preview/media/imagePreview.css
index 49a01b8d969..67c73e39595 100644
--- a/extensions/media-preview/media/imagePreview.css
+++ b/extensions/media-preview/media/imagePreview.css
@@ -12,6 +12,7 @@ html, body {
 body img {
 	max-width: none;
 	max-height: none;
+	vertical-align: middle;
 }
 
 .container:focus {
@@ -31,20 +32,20 @@ body img {
 	box-sizing: border-box;
 }
 
-.container.image img {
+.container.image .transparency-grid {
 	padding: 0;
 	background-position: 0 0, 8px 8px;
 	background-size: 16px 16px;
 	border: 1px solid var(--vscode-imagePreview-border);
 }
 
-.container.image img {
+.container.image .transparency-grid {
 	background-image:
 		linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)),
 		linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230));
 }
 
-.vscode-dark.container.image img {
+.vscode-dark.container.image .transparency-grid {
 	background-image:
 		linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)),
 		linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20));
@@ -54,13 +55,13 @@ body img {
 	image-rendering: pixelated;
 }
 
-.container img.scale-to-fit {
+.container .transparency-grid.scale-to-fit {
 	max-width: calc(100% - 20px);
 	max-height: calc(100% - 20px);
 	object-fit: contain;
 }
 
-.container img {
+.container .transparency-grid {
 	margin: auto;
 }
 
diff --git a/extensions/media-preview/media/imagePreview.js b/extensions/media-preview/media/imagePreview.js
index ab8ad542a2d..7179283d052 100644
--- a/extensions/media-preview/media/imagePreview.js
+++ b/extensions/media-preview/media/imagePreview.js
@@ -76,6 +76,8 @@
 
 	// Elements
 	const container = document.body;
+	const transparencyGrid = document.createElement('div');
+	transparencyGrid.classList.add('transparency-grid');
 	const image = document.createElement('img');
 
 	function updateScale(newScale) {
@@ -85,7 +87,7 @@
 
 		if (newScale === 'fit') {
 			scale = 'fit';
-			image.classList.add('scale-to-fit');
+			transparencyGrid.classList.add('scale-to-fit');
 			image.classList.remove('pixelated');
 			// @ts-ignore Non-standard CSS property
 			image.style.zoom = 'normal';
@@ -292,7 +294,9 @@
 
 		document.body.classList.remove('loading');
 		document.body.classList.add('ready');
-		document.body.append(image);
+
+		document.body.append(transparencyGrid);
+		transparencyGrid.appendChild(image);
 
 		updateScale(scale);