diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue
index 29b17254..7dd2375a 100644
--- a/packages/background/src/Background.vue
+++ b/packages/background/src/Background.vue
@@ -17,6 +17,7 @@ const {
   y = 0,
   bgColor,
   patternColor: initialPatternColor,
+  color: _patternColor,
   offset = 2,
 } = defineProps<BackgroundProps>()
 
@@ -44,7 +45,7 @@ const background = computed(() => {
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 const patternId = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
 
-const patternColor = toRef(() => initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
+const patternColor = toRef(() => _patternColor || initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
 </script>
 
 <script lang="ts">
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
index cb19be0d..01f93dcd 100644
--- a/packages/background/src/types.ts
+++ b/packages/background/src/types.ts
@@ -1,4 +1,6 @@
-// todo: replace with a simple string type
+/**
+ * @deprecated - will be removed in the next major version. You can use simple string values for `variant` prop instead, i.e. `lines` or `dots`
+ */
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
@@ -15,9 +17,17 @@ export interface BackgroundProps {
   /** Background pattern size */
   size?: number
   lineWidth?: number
-  /** Background pattern color */
+  /**
+   * @deprecated - will be removed in the next major version. Use `color` instead
+   * Background pattern color
+   */
   patternColor?: string
-  /** Background color */
+  /** Background pattern color */
+  color?: string
+  /**
+   * @deprecated - will be removed in the next major version. You can assign a bg color to `<VueFlow />` directly instead.
+   * Background color
+   */
   bgColor?: string
   /** @deprecated Background height */
   height?: number