diff --git a/components/opacitycheckerboard/README.md b/components/opacitycheckerboard/README.md
index 12d1d389d0..400497c8ab 100644
--- a/components/opacitycheckerboard/README.md
+++ b/components/opacitycheckerboard/README.md
@@ -1,6 +1,7 @@
 # @spectrum-css/opacitycheckerboard
 
-> Opacity checkerboard
+> Opacity checkerboard is a class used to highlight background color opacity.
+
 
 This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
 
diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css
index 7fa94b6402..5d9e7c78b0 100644
--- a/components/opacitycheckerboard/index.css
+++ b/components/opacitycheckerboard/index.css
@@ -21,8 +21,6 @@ permissions and limitations under the License. */
 }
 
 .spectrum-OpacityCheckerboard {
-	inline-size: 100%;
-	block-size: 100%;
 	background: repeating-conic-gradient(
 			var(
 					--mod-opacity-checkerboard-light,
diff --git a/components/opacitycheckerboard/metadata/opacitycheckerboard.yml b/components/opacitycheckerboard/metadata/opacitycheckerboard.yml
index 29dfce334b..ca741c7567 100644
--- a/components/opacitycheckerboard/metadata/opacitycheckerboard.yml
+++ b/components/opacitycheckerboard/metadata/opacitycheckerboard.yml
@@ -1,17 +1,17 @@
-name: Opacity Checkerboard
-description: Opacity checkerboard is used with other components to highlight opacity.
+name: Opacity checkerboard
+description: Opacity checkerboard is a class used to highlight background color opacity.
 examples:
   - id: opacity-checkerboard
-    name: Opacity Checkerboard
+    name: Opacity checkerboard
     markup: |
       <div style="inline-size: 100px; block-size: 100px;">
-        <div class="spectrum-OpacityCheckerboard">
+        <div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;">
         </div>
       </div>
   - id: opacity-checkerboard
-    name: Opacity Checkerboard with color overlay
+    name: Opacity checkerboard with color overlay
     markup: |
       <div style="inline-size: 100px; block-size: 100px;">
-        <div class="spectrum-OpacityCheckerboard"></div>
+        <div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;"></div>
         <div style="background-color: rgba(255, 0, 0, 0.5); inline-size: 100%; block-size: 100%; position: relative; inset-block: -100%"></div>
       </div>
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index e0e4a8828d..86252d1ec6 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 79893482d1..dec44a3670 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,