diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
index e61f914e81..8872a8da78 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
@@ -1,9 +1,34 @@
 import { keywordValues } from "@webstudio-is/css-data";
 import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
-import { getStyleSource, type StyleInfo } from "../../shared/style-info";
+import {
+  getStyleSource,
+  type StyleInfo,
+  type StyleValueInfo,
+} from "../../shared/style-info";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { NonResetablePropertyName } from "../../shared/property-name";
 import type { DeleteProperty, SetProperty } from "../../shared/use-style-data";
+import { useMemo } from "react";
+
+const keyworkToValue: Record<string, number> = {
+  left: 0,
+  right: 100,
+  center: 50,
+  top: 0,
+  bottom: 100,
+};
+
+const calculateBackgroundPosition = (info: StyleValueInfo | undefined) => {
+  if (info?.value.type === "unit") {
+    return info.value.value;
+  }
+
+  if (info?.value.type === "keyword") {
+    return keyworkToValue[info.value.value];
+  }
+
+  return 0;
+};
 
 export const BackgroundPosition = ({
   currentStyle,
@@ -15,9 +40,9 @@ export const BackgroundPosition = ({
   deleteProperty: DeleteProperty;
 }) => {
   const xInfo = currentStyle.backgroundPositionX;
-  const x = xInfo?.value.type === "unit" ? xInfo.value.value : 0;
   const yInfo = currentStyle.backgroundPositionY;
-  const y = yInfo?.value.type === "unit" ? yInfo.value.value : 0;
+  const x = useMemo(() => calculateBackgroundPosition(xInfo), [xInfo]);
+  const y = useMemo(() => calculateBackgroundPosition(yInfo), [yInfo]);
 
   return (
     <Flex direction="column" gap="1">