diff --git a/.changeset/late-toys-play.md b/.changeset/late-toys-play.md
new file mode 100644
index 000000000..e6c7bcbbf
--- /dev/null
+++ b/.changeset/late-toys-play.md
@@ -0,0 +1,6 @@
+---
+"@vue-flow/background": minor
+"@vue-flow/core": minor
+---
+
+Move `<Background>` component to core package
diff --git a/.changeset/spicy-cups-argue.md b/.changeset/spicy-cups-argue.md
new file mode 100644
index 000000000..e94b6b8d2
--- /dev/null
+++ b/.changeset/spicy-cups-argue.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+Re-export `<Background>` from core pkg
diff --git a/.changeset/witty-seals-cough.md b/.changeset/witty-seals-cough.md
new file mode 100644
index 000000000..a9108666e
--- /dev/null
+++ b/.changeset/witty-seals-cough.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+Deprecate `@vue-flow/background` pkg
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index b0a1334b6..4bca121f0 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -98,7 +98,7 @@ onPaneReady((i) => emit('pane', i))
     <VueFlow>
       <Controls :show-interactive="false" />
       <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
-      <Background variant="lines" pattern-color="#aaa" :gap="46" />
+      <Background variant="lines" color="#aaa" :gap="46" />
     </VueFlow>
   </div>
 
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 538af3bb0..e06ec763c 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -190,8 +190,8 @@ function scrollTo() {
 
 <template>
   <VueFlow ref="el" :style="{ opacity: !!currentBreakpoint ? 1 : 0 }">
-    <Background id="dots" pattern-color="#aaa" :size="0.75" :gap="25" />
-    <Background id="lines" variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
+    <Background id="dots" color="#aaa" :size="0.75" :gap="25" />
+    <Background id="lines" variant="lines" :color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 7d614ee03..ec29656cd 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -76,7 +76,7 @@ onPaneReady((i) => emit('pane', i))
   >
     <VueFlow class="nested">
       <Controls class="md:(!left-auto !right-[10px])" />
-      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
+      <Background color="#aaa" class="!bg-gray-800" :gap="18" />
     </VueFlow>
   </div>
 </template>
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index d411c851b..81dba8ef6 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import type { MiniMapNodeFunc } from '@vue-flow/minimap'
@@ -96,12 +96,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
       </template>
       <Controls class="hidden md:block" />
 
-      <Background
-        :variant="BackgroundVariant.Lines"
-        :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-        :gap="48"
-        :size="1"
-      />
+      <Background variant="lines" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="48" :size="1" />
 
       <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
     </VueFlow>
diff --git a/docs/examples/basic/App.vue b/docs/examples/basic/App.vue
index afb5322e4..3f7ae56d6 100644
--- a/docs/examples/basic/App.vue
+++ b/docs/examples/basic/App.vue
@@ -102,7 +102,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background color="#aaa" :gap="16" />
 
     <MiniMap />
 
diff --git a/docs/examples/dnd/DropzoneBackground.vue b/docs/examples/dnd/DropzoneBackground.vue
index b78be6a4c..78eb9f140 100644
--- a/docs/examples/dnd/DropzoneBackground.vue
+++ b/docs/examples/dnd/DropzoneBackground.vue
@@ -4,7 +4,7 @@ import { Background } from '@vue-flow/background'
 
 <template>
   <div class="dropzone-background">
-    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+    <Background :size="2" :gap="20" color="#BDBDBD" />
 
     <div class="overlay">
       <slot />
diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index e3e1242bb..c2769b8de 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -32,7 +32,7 @@ import { Background } from '@vue-flow/background'
 
 | Name         | Definition                            | Type                                                   | Optional | Default |
 |--------------|---------------------------------------|--------------------------------------------------------|----------|---------|
-| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true     | dots    |
+| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/types/BackgroundVariant) | true     | dots    |
 | gap          | Pattern gap                           | number                                                 | true     | 10      |
 | size         | Pattern size                          | number                                                 | true     | 0.4     |
 | patternColor | Pattern color                         | string                                                 | true     | #81818a |
diff --git a/examples/nuxt3/components/Flow.vue b/examples/nuxt3/components/Flow.vue
index 320229360..06ce05529 100644
--- a/examples/nuxt3/components/Flow.vue
+++ b/examples/nuxt3/components/Flow.vue
@@ -99,7 +99,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background :gap="16" />
 
     <MiniMap />
 
diff --git a/examples/vite/src/EasyConnect/EasyConnect.vue b/examples/vite/src/EasyConnect/EasyConnect.vue
index ce63463a6..ccce6472a 100644
--- a/examples/vite/src/EasyConnect/EasyConnect.vue
+++ b/examples/vite/src/EasyConnect/EasyConnect.vue
@@ -57,7 +57,7 @@ onConnect(addEdges)
       :min-zoom="0.2"
       :max-zoom="4"
     >
-      <Background pattern-color="#aaa" :gap="8" />
+      <Background :gap="8" />
 
       <MiniMap />
 
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index 31d9f1b20..791b02f87 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -28,7 +28,7 @@ function addRandomNode() {
   <VueFlow>
     <MiniMap />
     <Controls />
-    <Background :variant="BackgroundVariant.Lines" />
+    <Background variant="lines" />
 
     <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
       add node
diff --git a/examples/vite/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
index c84100628..8488ea756 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -18,7 +18,7 @@ onConnect((params) => addEdges({ ...params, type: 'floating', markerEnd: MarkerT
 <template>
   <div class="floatingedges">
     <VueFlow fit-view-on-init>
-      <Background :variant="BackgroundVariant.Lines" :gap="24" />
+      <Background variant="lines" :gap="24" />
 
       <MiniMap />
 
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index 46ad71276..42047186f 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -174,6 +174,6 @@ const elements = ref<Elements>(initialElements)
   >
     <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
     <Controls />
-    <Background color="#aaa" :gap="20" />
+    <Background variant="lines" />
   </VueFlow>
 </template>
diff --git a/packages/background/README.md b/packages/background/README.md
index 177b637ce..1dd2a9181 100644
--- a/packages/background/README.md
+++ b/packages/background/README.md
@@ -1,5 +1,21 @@
 # Vue Flow: Background Component
 
+> [!WARNING]
+> This package has been deprecated. 
+> Please import the `<Background>` component from `@vue-flow/core`
+> ```vue
+> <script setup>
+> import { VueFlow, Background } from '@vue-flow/core'
+> // ...
+> </script>
+> 
+> <template>
+>   <VueFlow :nodes="nodes" :edges="edges">
+>     <Background />
+>   </VueFlow>
+> </template>
+> ```
+
 This is a background component for Vue Flow.
 It can be used to create a background in your canvas.
 
diff --git a/packages/background/package.json b/packages/background/package.json
index 3bde3f4ab..04c7a85c6 100644
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -49,22 +49,19 @@
     "dev": "pnpm types:watch & pnpm build:watch",
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
+    "types": "tsc && pnpm lint:dist",
+    "types:watch": "tsc --watch",
     "lint": "eslint --ext .js,.ts,.vue ./",
     "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
     "test": "exit 0"
   },
   "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
+    "@vue-flow/core": "^2.0.0"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
+    "@vue-flow/core": "workspace:*"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/background/src/index.ts b/packages/background/src/index.ts
index e7aaa4b7b..55cc73259 100644
--- a/packages/background/src/index.ts
+++ b/packages/background/src/index.ts
@@ -1,2 +1,6 @@
-export { default as Background } from './Background.vue'
-export * from './types'
+/**
+ * Re-export of the Background component and types from the core pkg.
+ *
+ * @deprecated Please import these directly from `@vue-flow/core` instead and remove `@vue-flow/background` as a dependency.
+ */
+export { Background, type BackgroundVariant, type BackgroundProps } from '@vue-flow/core'
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
deleted file mode 100644
index 01f93dcd2..000000000
--- a/packages/background/src/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @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',
-}
-
-export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
-
-export interface BackgroundProps {
-  id?: string
-  /** The background pattern variant */
-  variant?: BackgroundVariant | BackgroundVariantType
-  /** Background pattern gap */
-  gap?: number | number[]
-  /** Background pattern size */
-  size?: number
-  lineWidth?: number
-  /**
-   * @deprecated - will be removed in the next major version. Use `color` instead
-   * Background pattern color
-   */
-  patternColor?: string
-  /** 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
-  /** @deprecated Background width */
-  width?: number
-  /** Background x-coordinate (offset x) */
-  x?: number
-  /** Background y-coordinate (offset y) */
-  y?: number
-  /** Background offset */
-  offset?: number
-}
diff --git a/packages/background/tsconfig.json b/packages/background/tsconfig.json
index f02b0a03e..4409e4bb0 100644
--- a/packages/background/tsconfig.json
+++ b/packages/background/tsconfig.json
@@ -3,10 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
+    "types": ["vite/client"]
   },
   "include": [
     "./src"
diff --git a/packages/background/src/Background.vue b/packages/core/src/components/Background/Background.vue
similarity index 54%
rename from packages/background/src/Background.vue
rename to packages/core/src/components/Background/Background.vue
index 7dd2375a8..2cebdb175 100644
--- a/packages/background/src/Background.vue
+++ b/packages/core/src/components/Background/Background.vue
@@ -1,39 +1,32 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@vue-flow/core'
-import { computed, toRef } from 'vue'
-import { BackgroundVariant } from './types'
+import { computed } from 'vue'
+import { useVueFlow } from '../../composables/useVueFlow'
 import type { BackgroundProps } from './types'
 import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
-const {
-  id,
-  variant = BackgroundVariant.Dots,
-  gap = 20,
-  size = 1,
-  lineWidth = 1,
-  height = 100,
-  width = 100,
-  x = 0,
-  y = 0,
-  bgColor,
-  patternColor: initialPatternColor,
-  color: _patternColor,
-  offset = 2,
-} = defineProps<BackgroundProps>()
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant: 'dots',
+  gap: 20,
+  size: 1,
+  lineWidth: 1,
+  x: 0,
+  y: 0,
+  offset: 2,
+})
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
-  const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
+  const [gapX, gapY] = Array.isArray(props.gap) ? props.gap : [props.gap, props.gap]
 
   const scaledGap: [number, number] = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1]
 
-  const scaledSize = size * viewport.value.zoom
+  const scaledSize = props.size * viewport.value.zoom
 
   const patternOffset =
-    variant === BackgroundVariant.Dots
-      ? [scaledSize / offset, scaledSize / offset]
-      : [scaledGap[0] / offset, scaledGap[1] / offset]
+    props.variant === 'dots'
+      ? [scaledSize / props.offset, scaledSize / props.offset]
+      : [scaledGap[0] / props.offset, scaledGap[1] / props.offset]
 
   return {
     scaledGap,
@@ -43,9 +36,9 @@ 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 patternId = computed(() => `pattern-${vueFlowId}${props.id ? `-${props.id}` : ''}`)
 
-const patternColor = toRef(() => _patternColor || initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
+const patternColor = computed(() => props.color || DefaultBgColors[props.variant || 'dots'])
 </script>
 
 <script lang="ts">
@@ -56,13 +49,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    class="vue-flow__background vue-flow__container"
-    :style="{
-      height: `${height > 100 ? 100 : height}%`,
-      width: `${width > 100 ? 100 : width}%`,
-    }"
-  >
+  <svg class="vue-flow__background vue-flow__container">
     <slot :id="patternId" name="pattern-container">
       <pattern
         :id="patternId"
@@ -74,17 +61,13 @@ export default {
         patternUnits="userSpaceOnUse"
       >
         <slot name="pattern">
-          <template v-if="variant === BackgroundVariant.Lines">
+          <template v-if="variant === 'lines'">
             <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
-          <template v-else-if="variant === BackgroundVariant.Dots">
+          <template v-else-if="variant === 'dots'">
             <DotPattern :color="patternColor" :radius="background.size / offset" />
           </template>
-
-          <svg v-if="bgColor" height="100" width="100">
-            <rect width="100%" height="100%" :fill="bgColor" />
-          </svg>
         </slot>
       </pattern>
     </slot>
diff --git a/packages/core/src/components/Background/index.ts b/packages/core/src/components/Background/index.ts
new file mode 100644
index 000000000..e7aaa4b7b
--- /dev/null
+++ b/packages/core/src/components/Background/index.ts
@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'
diff --git a/packages/background/src/patterns.ts b/packages/core/src/components/Background/patterns.ts
similarity index 79%
rename from packages/background/src/patterns.ts
rename to packages/core/src/components/Background/patterns.ts
index 228175700..ffabf2c23 100644
--- a/packages/background/src/patterns.ts
+++ b/packages/core/src/components/Background/patterns.ts
@@ -1,6 +1,6 @@
 import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
-import { BackgroundVariant } from './types'
+import type { BackgroundVariant } from './types'
 
 interface LinePatternProps {
   dimensions: [number, number]
@@ -26,11 +26,11 @@ export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radi
 }
 
 export const Patterns = {
-  [BackgroundVariant.Lines]: LinePattern,
-  [BackgroundVariant.Dots]: DotPattern,
+  lines: LinePattern,
+  dots: DotPattern,
 }
 
 export const DefaultBgColors: Record<BackgroundVariant, string> = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
+  lines: '#eee',
+  dots: '#91919a',
 }
diff --git a/packages/core/src/components/Background/types.ts b/packages/core/src/components/Background/types.ts
new file mode 100644
index 000000000..3b8c62d62
--- /dev/null
+++ b/packages/core/src/components/Background/types.ts
@@ -0,0 +1,67 @@
+/**
+ * The Background can be either a dotted one or a lined one
+ *
+ * @default 'dots'
+ */
+export type BackgroundVariant = 'dots' | 'lines'
+
+export interface BackgroundProps {
+  /**
+   * `<Background>` component id
+   *
+   * This is necessary when you have multiple flows with backgrounds visible at the same time.
+   * If no id is explicitly assigned, an auto-generated one is used.
+   *
+   * @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
+   */
+  id?: string
+  /**
+   * The background pattern variant {@link BackgroundVariant}
+   *
+   * @default 'dots'
+   */
+  variant?: BackgroundVariant
+  /**
+   * The background pattern gap
+   *
+   * Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
+   *
+   * @default 20
+   */
+  gap?: number | number[]
+  /**
+   * Background pattern size
+   *
+   * @default 1
+   */
+  size?: number
+  /**
+   * @default 1
+   */
+  lineWidth?: number
+  /**
+   * The background pattern color
+   *
+   * This only changes the color of the *pattern*, not the background color itself.
+   *
+   * If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
+   */
+  color?: string
+  /**
+   * Background x-coordinate (offset x)
+   *
+   * @default 0
+   */
+  x?: number
+  /**
+   * Background y-coordinate (offset y)
+   * @default 0
+   */
+  y?: number
+  /**
+   * Background pattern offset
+   *
+   * @default 2
+   */
+  offset?: number
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 371c4dfa9..dbd591546 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,6 +18,8 @@ export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
 
+export * from './components/Background'
+
 export {
   getBezierPath,
   getSimpleBezierPath,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c9cc7511..361b32f54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -236,10 +236,6 @@ importers:
         version: 1.8.16(typescript@5.4.5)
 
   packages/background:
-    dependencies:
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
     devDependencies:
       '@tooling/eslint-config':
         specifier: workspace:*
@@ -247,15 +243,9 @@ importers:
       '@tooling/tsconfig':
         specifier: workspace:*
         version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../core
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
 
   packages/controls:
     dependencies: