diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index 08b6043e779..4946244a155 100644
--- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
+++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -22,7 +22,7 @@ export default {
 	},
 	args: {
 		rootClass: "spectrum-OpacityCheckerboard",
-		backgroundPosition: "top left"
+		backgroundPosition: "left top"
 	},
 	parameters: {
 		actions: {
@@ -39,11 +39,20 @@ export default {
 	],
 };
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+	customStyles: {
+		"inline-size": "100%",
+		"block-size": "100%"
+	}
+};
 
 export const CheckerboardPosition = Template.bind({});
 CheckerboardPosition.args = {
 	backgroundPosition: 'center center',
+	customStyles: {
+		"inline-size": "100%",
+		"block-size": "100%"
+	}
 };
 CheckerboardPosition.parameters = {
 	docs: {
diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js
index 6daa8d63f47..dec44a36707 100644
--- a/components/opacitycheckerboard/stories/template.js
+++ b/components/opacitycheckerboard/stories/template.js
@@ -7,7 +7,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-OpacityCheckerboard",
-	backgroundPosition = "top left",
+	backgroundPosition,
 	customClasses = [],
 	customStyles = {},
 	id,
@@ -22,8 +22,6 @@ export const Template = ({
 			})}
 			style=${ifDefined(styleMap({
 				"--mod-opacity-checkerboard-position": backgroundPosition,
-				"inline-size": "100%",
-				"block-size": "100%",
 				...customStyles,
 			}))}
 			role=${ifDefined(role)}