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/DocsRepl.vue b/docs/components/DocsRepl.vue
index 8b042ed6a..53672bbff 100644
--- a/docs/components/DocsRepl.vue
+++ b/docs/components/DocsRepl.vue
@@ -67,7 +67,6 @@ await store.setFiles(
 // pre-set import map
 store.setImportMap({
   imports: {
-    '@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
     '@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
     '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
     '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index b0a1334b6..4af309dbf 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -98,7 +97,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/Basic.vue b/docs/components/home/flows/Basic.vue
index 84551d2bb..afcc66a40 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
-import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 
 import Cross from '~icons/mdi/window-close'
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 538af3bb0..c10b05e61 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { Background } from '@vue-flow/background'
 import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -190,8 +189,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..2951a9e65 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { breakpointsTailwind } from '@vueuse/core'
 
@@ -76,7 +75,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..62eaa36c3 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, BackgroundVariant } 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 +95,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..03a118554 100644
--- a/docs/examples/basic/App.vue
+++ b/docs/examples/basic/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { initialEdges, initialNodes } from './initial-elements.js'
@@ -102,7 +101,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/confirm-delete/App.vue b/docs/examples/confirm-delete/App.vue
index 376c98550..3a52856ee 100644
--- a/docs/examples/confirm-delete/App.vue
+++ b/docs/examples/confirm-delete/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { useDialog } from './useDialog'
 import Dialog from './Dialog.vue'
 
diff --git a/docs/examples/dnd/DropzoneBackground.vue b/docs/examples/dnd/DropzoneBackground.vue
index b78be6a4c..8065176e2 100644
--- a/docs/examples/dnd/DropzoneBackground.vue
+++ b/docs/examples/dnd/DropzoneBackground.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { Background } from '@vue-flow/background'
+import { Background } from '@vue-flow/core'
 </script>
 
 <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/examples/edge-markers/App.vue b/docs/examples/edge-markers/App.vue
index d825eae44..c2874c87d 100644
--- a/docs/examples/edge-markers/App.vue
+++ b/docs/examples/edge-markers/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { MarkerType, VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import CustomEdge from './CustomEdge.vue'
 
 const nodes = ref([
diff --git a/docs/examples/edges/App.vue b/docs/examples/edges/App.vue
index 85bbe39ba..0ed4bd222 100644
--- a/docs/examples/edges/App.vue
+++ b/docs/examples/edges/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { MarkerType, VueFlow } from '@vue-flow/core'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import EdgeWithButton from './EdgeWithButton.vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdgeLabel from './CustomEdgeLabel.vue'
diff --git a/docs/examples/hidden/App.vue b/docs/examples/hidden/App.vue
index 64cded441..cc4b66e54 100644
--- a/docs/examples/hidden/App.vue
+++ b/docs/examples/hidden/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, VueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {
diff --git a/docs/examples/layout-simple/App.vue b/docs/examples/layout-simple/App.vue
index 2e2ed4f4a..810960b31 100644
--- a/docs/examples/layout-simple/App.vue
+++ b/docs/examples/layout-simple/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './Icon.vue'
 
 import { initialEdges, initialNodes } from './initial-elements.js'
diff --git a/docs/examples/layout/App.vue b/docs/examples/layout/App.vue
index 147dd1861..53d1b84e3 100644
--- a/docs/examples/layout/App.vue
+++ b/docs/examples/layout/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './Icon.vue'
 import ProcessNode from './ProcessNode.vue'
 import AnimationEdge from './AnimationEdge.vue'
diff --git a/docs/examples/loopback/App.vue b/docs/examples/loopback/App.vue
index 782b11772..fbe1d17a1 100644
--- a/docs/examples/loopback/App.vue
+++ b/docs/examples/loopback/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import LoopbackEdge from './LoopbackEdge.vue'
 
 const { updateEdgeData, updateNode } = useVueFlow()
diff --git a/docs/examples/math/App.vue b/docs/examples/math/App.vue
index a8567738b..cf37954a2 100644
--- a/docs/examples/math/App.vue
+++ b/docs/examples/math/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import ValueNode from './ValueNode.vue'
 import OperatorNode from './OperatorNode.vue'
diff --git a/docs/examples/multi/Flow.vue b/docs/examples/multi/Flow.vue
index 7ffa82578..db9965804 100644
--- a/docs/examples/multi/Flow.vue
+++ b/docs/examples/multi/Flow.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, VueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {
diff --git a/docs/examples/nested/App.vue b/docs/examples/nested/App.vue
index a10794297..72c9a144b 100644
--- a/docs/examples/nested/App.vue
+++ b/docs/examples/nested/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
diff --git a/docs/examples/save-restore/App.vue b/docs/examples/save-restore/App.vue
index c1b3524f1..8bc6f9649 100644
--- a/docs/examples/save-restore/App.vue
+++ b/docs/examples/save-restore/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import SaveRestoreControls from './Controls.vue'
 
 const nodes = ref([{ id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } }])
diff --git a/docs/examples/stress/App.vue b/docs/examples/stress/App.vue
index 727bb684d..a23967306 100644
--- a/docs/examples/stress/App.vue
+++ b/docs/examples/stress/App.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
diff --git a/docs/examples/transition/App.vue b/docs/examples/transition/App.vue
index e37d8e47d..29950212b 100644
--- a/docs/examples/transition/App.vue
+++ b/docs/examples/transition/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'
 
 const { onInit } = useVueFlow()
diff --git a/docs/examples/update-edge/App.vue b/docs/examples/update-edge/App.vue
index 4d236af80..ed2819df5 100644
--- a/docs/examples/update-edge/App.vue
+++ b/docs/examples/update-edge/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { updateEdge, addEdges } = useVueFlow()
 
diff --git a/docs/package.json b/docs/package.json
index d03c41df6..9d0486b31 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,7 +15,6 @@
     "@stackblitz/sdk": "^1.11.0",
     "@vercel/analytics": "^1.3.2",
     "@vercel/speed-insights": "^1.0.14",
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*",
diff --git a/docs/src/.vitepress/plugins/copy.ts b/docs/src/.vitepress/plugins/copy.ts
index b0f308ff6..b06bd7b43 100644
--- a/docs/src/.vitepress/plugins/copy.ts
+++ b/docs/src/.vitepress/plugins/copy.ts
@@ -13,7 +13,7 @@ function getPublicPath(fileName: string) {
 }
 
 function copyFiles(emit: Emit) {
-  ;['core', 'background', 'controls', 'minimap', 'node-resizer', 'node-toolbar'].forEach((name) => {
+  ;['core', 'controls', 'minimap', 'node-resizer', 'node-toolbar'].forEach((name) => {
     const fileName = `vue-flow-${name}.mjs`
 
     const filePath = resolve(__dirname, getPkgPath(name, fileName))
diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index b928281c5..5e0705f96 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -2,23 +2,13 @@
 
 Vue Flow comes with two background pattern variants: dots and lines. 
 
-## Installation
-
-```bash
-yarn add @vue-flow/background
-
-# or
-npm install @vue-flow/background
-```
-
 ## Usage
 
 To use the background simply pass the `Background` component as a child to the `VueFlow` component.
 
 ```vue
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
@@ -32,7 +22,7 @@ import { Background } from '@vue-flow/background'
 
 | Name         | Definition                            | Type                                                          | Optional | Default |
 |--------------|---------------------------------------|---------------------------------------------------------------|----------|---------|
-| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/enumerations/BackgroundVariant) | true     | dots    |
+| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/type-aliases/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/docs/src/guide/edge.md b/docs/src/guide/edge.md
index 7cf4c446c..d717b9f9b 100644
--- a/docs/src/guide/edge.md
+++ b/docs/src/guide/edge.md
@@ -5,8 +5,7 @@ title: Edges
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import LogosTypescript from '~icons/logos/typescript-icon';
-import { VueFlow, Panel } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Panel, VueFlow } from '@vue-flow/core';
 import Check from '~icons/mdi/check';
 import Close from '~icons/mdi/close';
 import { ref } from 'vue';
diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md
index 05e43a2f7..d81bc7402 100644
--- a/docs/src/guide/node.md
+++ b/docs/src/guide/node.md
@@ -5,8 +5,7 @@ title: Nodes
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import LogosTypescript from '~icons/logos/typescript-icon';
-import { VueFlow, Panel } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Panel, VueFlow } from '@vue-flow/core';
 import Check from '~icons/mdi/check';
 import Close from '~icons/mdi/close';
 import { ref, h } from 'vue';
diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md
index 61a789c51..8ca56cdfd 100644
--- a/docs/src/guide/theming.md
+++ b/docs/src/guide/theming.md
@@ -5,8 +5,7 @@ title: Theming
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import { ref, h } from 'vue';
-import { Handle, Position, VueFlow } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Handle, Position, VueFlow } from '@vue-flow/core';
 
 const CustomNode = (props) => h('div', [
   h(Handle, { connectable: false, type: 'target', position: Position.Top }),
diff --git a/examples/nuxt3/components/Flow.vue b/examples/nuxt3/components/Flow.vue
index 320229360..42ba789d6 100644
--- a/examples/nuxt3/components/Flow.vue
+++ b/examples/nuxt3/components/Flow.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import { initialEdges, initialNodes } from './initial-elements.js'
@@ -99,7 +98,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background :gap="16" />
 
     <MiniMap />
 
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
index 1d07c367f..e55f6af37 100644
--- a/examples/nuxt3/package.json
+++ b/examples/nuxt3/package.json
@@ -7,7 +7,6 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*"
diff --git a/examples/quasar/package.json b/examples/quasar/package.json
index 4bfd51041..e6b5917c6 100644
--- a/examples/quasar/package.json
+++ b/examples/quasar/package.json
@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.12",
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*",
diff --git a/examples/vite/index-cdn.html b/examples/vite/index-cdn.html
index c406a7c25..acb323590 100644
--- a/examples/vite/index-cdn.html
+++ b/examples/vite/index-cdn.html
@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/vue-flow-core.iife.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@vue-flow/background@1.0.4/dist/vue-flow-background.iife.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/style.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/theme-default.min.css" rel="stylesheet">
 </head>
diff --git a/examples/vite/package.json b/examples/vite/package.json
index e9c5b5914..0cbbabd1f 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*",
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 04f7684a4..1a6cf4c1c 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { Edge, Node, ValidConnectionFunc } from '@vue-flow/core'
-import { ConnectionMode, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import type { Edge, Node } from '@vue-flow/core'
+import { Background, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
-import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -45,22 +44,10 @@ function resetViewport() {
 function toggleclass() {
   return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
-
-const isValidConnection: ValidConnectionFunc = (...args) => {
-  console.log(args)
-  return true
-}
 </script>
 
 <template>
-  <VueFlow
-    :nodes="nodes"
-    :edges="edges"
-    :connection-mode="ConnectionMode.Strict"
-    :is-valid-connection="isValidConnection"
-    fit-view-on-init
-    class="vue-flow-basic-example"
-  >
+  <VueFlow :nodes="nodes" :edges="edges" class="vue-flow-basic-example" fit-view-on-init>
     <Background />
     <MiniMap />
     <Controls />
diff --git a/examples/vite/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
index 535084f98..f7877ba67 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,8 +1,7 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { VueFlow, isNode } from '@vue-flow/core'
+import { Background, VueFlow, isNode } from '@vue-flow/core'
 
-import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import type { UnwrapNestedRefs } from 'vue'
diff --git a/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue b/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue
index 86c382454..e1b8286ef 100644
--- a/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue
+++ b/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Edge, EdgeChange, Node, NodeChange } from '@vue-flow/core'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { useDialog } from './useDialog'
 import Dialog from './Dialog.vue'
 
diff --git a/examples/vite/src/EasyConnect/EasyConnect.vue b/examples/vite/src/EasyConnect/EasyConnect.vue
index 406af19a6..ac947ddd9 100644
--- a/examples/vite/src/EasyConnect/EasyConnect.vue
+++ b/examples/vite/src/EasyConnect/EasyConnect.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
 import type { Node } from '@vue-flow/core'
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import FloatingEdge from './FloatingEdge.vue'
@@ -54,7 +53,7 @@ onConnect(addEdges)
     :default-edge-options="defaultEdgeOptions"
     fit-view-on-init
   >
-    <Background pattern-color="#aaa" :gap="8" />
+    <Background :gap="8" />
 
     <template #node-custom="props">
       <CustomNode :id="props.id" />
diff --git a/examples/vite/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
index 6a7bcd6af..232a29ec1 100644
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index 31d9f1b20..9387a4cbd 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 
-import { Background, BackgroundVariant } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -28,7 +27,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..305817260 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background, MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -18,7 +17,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/Layouting/LayoutingExample.vue b/examples/vite/src/Layouting/LayoutingExample.vue
index e2fede510..74469ce4f 100644
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './components/Icon.vue'
 import ProcessNode from './nodes/ProcessNode.vue'
 import ProcessEdge from './edges/ProcessEdge.vue'
diff --git a/examples/vite/src/Math/MathExample.vue b/examples/vite/src/Math/MathExample.vue
index 354a65c86..71bd8f162 100644
--- a/examples/vite/src/Math/MathExample.vue
+++ b/examples/vite/src/Math/MathExample.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initialElements'
 import ValueNode from './ValueNode.vue'
 import OperatorNode from './OperatorNode.vue'
diff --git a/examples/vite/src/MultiFlows/Flow.vue b/examples/vite/src/MultiFlows/Flow.vue
index 57f85dd3f..c35b13ac8 100644
--- a/examples/vite/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/vite/src/Nesting/Nesting.vue b/examples/vite/src/Nesting/Nesting.vue
index 688e99dd2..061179b42 100644
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index 46ad71276..92ff5bc79 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
-import { MarkerType, VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -174,6 +173,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/examples/vite/src/Stress/StressExample.vue b/examples/vite/src/Stress/StressExample.vue
index 9d35fbdae..fc4ba9cca 100644
--- a/examples/vite/src/Stress/StressExample.vue
+++ b/examples/vite/src/Stress/StressExample.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
-import { Background } from '@vue-flow/background'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(15, 15)
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
index c5eb9043a..af69476d5 100644
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -20,6 +20,6 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    exclude: ['@vue-flow/core', '@vue-flow/minimap', '@vue-flow/controls', '@vue-flow/background'],
+    exclude: ['@vue-flow/core', '@vue-flow/minimap', '@vue-flow/controls'],
   },
 })
diff --git a/packages/background/.eslintrc.js b/packages/background/.eslintrc.js
deleted file mode 100644
index e4b0b38cc..000000000
--- a/packages/background/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@tooling/eslint-config'],
-}
diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md
deleted file mode 100644
index ad06050b1..000000000
--- a/packages/background/CHANGELOG.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# @vue-flow/background
-
-## 1.3.2
-
-### Patch Changes
-
-- [#1692](https://github.com/bcakmakoglu/vue-flow/pull/1692) [`f08c15d`](https://github.com/bcakmakoglu/vue-flow/commit/f08c15da511ab3e6e6960e2e80c32d2870d6e755) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Set default offset value to `0`
-
-## 1.3.1
-
-### Patch Changes
-
-- [#1666](https://github.com/bcakmakoglu/vue-flow/pull/1666) [`a48659a`](https://github.com/bcakmakoglu/vue-flow/commit/a48659a9215ca037221e09fccab85ea04b1a50d6) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Start patterns at 0,0
-
-## 1.3.0
-
-### Minor Changes
-
-- [#1301](https://github.com/bcakmakoglu/vue-flow/pull/1301) [`b03608d`](https://github.com/bcakmakoglu/vue-flow/commit/b03608dc33ec5999c095ec8d3f80dbab7ec931ef) Thanks [@github-actions](https://github.com/apps/github-actions)! - Deprecate `bgColor` prop
-
-## 1.2.0
-
-### Minor Changes
-
-- [#861](https://github.com/bcakmakoglu/vue-flow/pull/861) [`6c243d8f`](https://github.com/bcakmakoglu/vue-flow/commit/6c243d8fc533cbe2030c6085f5673388769324e6) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Change default bg gap to 20 from 10
-
-### Patch Changes
-
-- [#865](https://github.com/bcakmakoglu/vue-flow/pull/865) [`9ce7bdc4`](https://github.com/bcakmakoglu/vue-flow/commit/9ce7bdc4908dda4dea299e5f469b252ac20a12ab) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `exports` field to package.json
-
-## 1.1.0
-
-### Minor Changes
-
-- [#782](https://github.com/bcakmakoglu/vue-flow/pull/782) [`59430fe3`](https://github.com/bcakmakoglu/vue-flow/commit/59430fe343f5e229864bef8cc857c4c7cc025491) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `lineWidth` prop to background component. Allows changing line bg stroke width
-
-- [#782](https://github.com/bcakmakoglu/vue-flow/pull/782) [`59430fe3`](https://github.com/bcakmakoglu/vue-flow/commit/59430fe343f5e229864bef8cc857c4c7cc025491) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Allow setting gap as number or number array (x,y)
-
-- [#782](https://github.com/bcakmakoglu/vue-flow/pull/782) [`59430fe3`](https://github.com/bcakmakoglu/vue-flow/commit/59430fe343f5e229864bef8cc857c4c7cc025491) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `offset` prop to background component. Allows for offsetting individual backgrounds to create a "multi" bg.
-
-## 1.0.5
-
-### Patch Changes
-
-- [#716](https://github.com/bcakmakoglu/vue-flow/pull/716) [`1685827d`](https://github.com/bcakmakoglu/vue-flow/commit/1685827d0ea1dc9864f95a1b3a54fbc43a296e5d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins
-
-## 1.0.4
-
-### Patch Changes
-
-- [#682](https://github.com/bcakmakoglu/vue-flow/pull/682) [`b08cb4d4`](https://github.com/bcakmakoglu/vue-flow/commit/b08cb4d45904c229d9ecda5e3cb477cbb7a6acaf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add compat mode to components to avoid breaking when used with @vue/compat
-
-## 1.0.3
-
-### Patch Changes
-
-- [#616](https://github.com/bcakmakoglu/vue-flow/pull/616) [`b16e3564`](https://github.com/bcakmakoglu/vue-flow/commit/b16e3564708c5429ad594156341fa3e95f84d3b2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 4 & update deps
-
-## 1.0.2
-
-### Patch Changes
-
-- [#588](https://github.com/bcakmakoglu/vue-flow/pull/588) [`4083ae0`](https://github.com/bcakmakoglu/vue-flow/commit/4083ae05d24dc68df7c77bfe2273a17237834cbf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Correct pkg main field
-
-## 1.0.1
-
-### Patch Changes
-
-- [#569](https://github.com/bcakmakoglu/vue-flow/pull/569) [`5373c4d`](https://github.com/bcakmakoglu/vue-flow/commit/5373c4d2e15fc8c50755eb96701e27e173690476) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add container styles to background element to avoid pushing other elements behind background
-
-## 1.0.0
-
-### Major Changes
-
-- [#519](https://github.com/bcakmakoglu/vue-flow/pull/519) [`cbdd8cc9`](https://github.com/bcakmakoglu/vue-flow/commit/cbdd8cc99867a10ed7f6d82dd83c7f6f8574d865) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Move Background component into separate package (`@vue-flow/background`)
diff --git a/packages/background/README.md b/packages/background/README.md
deleted file mode 100644
index 177b637ce..000000000
--- a/packages/background/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Vue Flow: Background Component
-
-This is a background component for Vue Flow.
-It can be used to create a background in your canvas.
-
-## 🛠 Setup
-
-```bash
-# install
-$ yarn add @vue-flow/background
-
-# or
-$ npm i --save @vue-flow/background
-```
-
-## 🎮 Quickstart
-
-```vue
-<script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
-</script>
-
-<template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
-    <Background />
-  </VueFlow>
-</template>
-```
diff --git a/packages/background/package.json b/packages/background/package.json
deleted file mode 100644
index b185f436a..000000000
--- a/packages/background/package.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "name": "@vue-flow/background",
-  "version": "1.3.2",
-  "private": false,
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/background"
-  },
-  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
-  "bugs": {
-    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
-  },
-  "keywords": [
-    "vue",
-    "flow",
-    "diagram",
-    "editor",
-    "graph",
-    "node",
-    "link",
-    "port",
-    "slot",
-    "vue3",
-    "composition-api",
-    "vue-flow",
-    "vueflow",
-    "typescript"
-  ],
-  "main": "./dist/vue-flow-background.js",
-  "module": "./dist/vue-flow-background.mjs",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/vue-flow-background.iife.js",
-  "jsdelivr": "./dist/vue-flow-background.iife.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-flow-background.mjs",
-      "require": "./dist/vue-flow-background.js"
-    }
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "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",
-    "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"
-  },
-  "devDependencies": {
-    "@tooling/eslint-config": "workspace:*",
-    "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
deleted file mode 100644
index 637d396ab..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 | [number, number]
-}
diff --git a/packages/background/tsconfig.json b/packages/background/tsconfig.json
deleted file mode 100644
index f02b0a03e..000000000
--- a/packages/background/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "@tooling/tsconfig/base",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
-  },
-  "include": [
-    "./src"
-  ]
-}
diff --git a/packages/background/vite.config.ts b/packages/background/vite.config.ts
deleted file mode 100644
index 23fc90383..000000000
--- a/packages/background/vite.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { resolve } from 'node:path'
-import { withConfig } from '@tooling/vite-config'
-
-export default withConfig({
-  build: {
-    lib: {
-      formats: ['es', 'cjs', 'iife'],
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'vue-flow-background',
-      name: 'VueFlowBackground',
-    },
-  },
-})
diff --git a/packages/background/src/Background.vue b/packages/core/src/components/Background/Background.vue
similarity index 63%
rename from packages/background/src/Background.vue
rename to packages/core/src/components/Background/Background.vue
index ab7d0ca09..1657ab1ef 100644
--- a/packages/background/src/Background.vue
+++ b/packages/core/src/components/Background/Background.vue
@@ -1,29 +1,24 @@
 <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 = 0,
-} = defineProps<BackgroundProps>()
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant: 'dots',
+  gap: 20,
+  size: 1,
+  lineWidth: 1,
+  x: 0,
+  y: 0,
+  offset: 0,
+})
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
+  const { gap, offset, size } = props
+
   const zoom = viewport.value.zoom
   const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
   const scaledGap: [number, number] = [gapX * zoom || 1, gapY * zoom || 1]
@@ -40,9 +35,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">
@@ -53,13 +48,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"
@@ -71,17 +60,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 / 2" />
           </template>
-
-          <svg v-if="bgColor" height="100" width="100">
-            <rect width="100%" height="100%" :fill="bgColor" />
-          </svg>
         </slot>
       </pattern>
     </slot>
diff --git a/packages/background/src/index.ts b/packages/core/src/components/Background/index.ts
similarity index 100%
rename from packages/background/src/index.ts
rename to packages/core/src/components/Background/index.ts
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..bdb869f99
--- /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 0
+   */
+  offset?: number | [number, number]
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 20a2c08a9..72e8d9c60 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 9a793ac53..424d8ea38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       '@vercel/speed-insights':
         specifier: ^1.0.14
         version: 1.0.14(react@18.2.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.4.5)))(vue@3.5.12(typescript@5.4.5))
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../packages/background
       '@vue-flow/controls':
         specifier: workspace:*
         version: link:../packages/controls
@@ -117,9 +114,6 @@ importers:
 
   examples/nuxt3:
     dependencies:
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../../packages/background
       '@vue-flow/controls':
         specifier: workspace:*
         version: link:../../packages/controls
@@ -142,9 +136,6 @@ importers:
       '@quasar/extras':
         specifier: ^1.16.12
         version: 1.16.12
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../../packages/background
       '@vue-flow/controls':
         specifier: workspace:*
         version: link:../../packages/controls
@@ -188,9 +179,6 @@ importers:
       '@dagrejs/dagre':
         specifier: ^1.1.4
         version: 1.1.4
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../../packages/background
       '@vue-flow/controls':
         specifier: workspace:*
         version: link:../../packages/controls
@@ -241,28 +229,6 @@ importers:
         specifier: ^2.1.6
         version: 2.1.6(typescript@5.4.5)
 
-  packages/background:
-    dependencies:
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
-    devDependencies:
-      '@tooling/eslint-config':
-        specifier: workspace:*
-        version: link:../../tooling/eslint-config
-      '@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:
       vue:
@@ -445,42 +411,8 @@ importers:
         specifier: ^1.8.16
         version: 1.8.16(typescript@5.4.5)
 
-  packages/pathfinding-edge:
-    dependencies:
-      pathfinding:
-        specifier: ^0.4.18
-        version: 0.4.18
-      perfect-arrows:
-        specifier: ^0.3.7
-        version: 0.3.7
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
-    devDependencies:
-      '@tooling/eslint-config':
-        specifier: workspace:*
-        version: link:../../tooling/eslint-config
-      '@tooling/tsconfig':
-        specifier: workspace:*
-        version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
-      '@types/pathfinding':
-        specifier: ^0.0.6
-        version: 0.0.6
-      '@vue-flow/core':
-        specifier: workspace:*
-        version: link:../core
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
-
   tests:
     dependencies:
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../packages/background
       '@vue-flow/controls':
         specifier: workspace:*
         version: link:../packages/controls
@@ -2308,9 +2240,6 @@ packages:
   '@types/normalize-package-data@2.4.2':
     resolution: {integrity: sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==}
 
-  '@types/pathfinding@0.0.6':
-    resolution: {integrity: sha512-yk2LRAKAOW6m1g/4le8tk8go6wjNmCq2EA1l6Rw3tkBautda3FkBzgCLdSNUPiTZPkjxI/OYBwHmJWoYUSk7RQ==}
-
   '@types/qs@6.9.8':
     resolution: {integrity: sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==}
 
@@ -4704,9 +4633,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  heap@0.2.5:
-    resolution: {integrity: sha512-G7HLD+WKcrOyJP5VQwYZNC3Z6FcQ7YYjEFiFoIj8PfEr73mu421o8B1N5DKUcc8K37EsJ2XXWA8DtrDz/2dReg==}
-
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -5936,16 +5862,9 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  pathfinding@0.4.18:
-    resolution: {integrity: sha512-R0TGEQ9GRcFCDvAWlJAWC+KGJ9SLbW4c0nuZRcioVlXVTlw+F5RvXQ8SQgSqI9KXWC1ew95vgmIiyaWTlCe9Ag==}
-
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
-  perfect-arrows@0.3.7:
-    resolution: {integrity: sha512-wEN2gerTPVWl3yqoFEF8OeGbg3aRe2sxNUi9rnyYrCsL4JcI6K2tBDezRtqVrYG0BNtsWLdYiiTrYm+X//8yLQ==}
-    engines: {node: '>=10'}
-
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -9837,8 +9756,6 @@ snapshots:
 
   '@types/normalize-package-data@2.4.2': {}
 
-  '@types/pathfinding@0.0.6': {}
-
   '@types/qs@6.9.8': {}
 
   '@types/range-parser@1.2.5': {}
@@ -12757,8 +12674,6 @@ snapshots:
 
   he@1.2.0: {}
 
-  heap@0.2.5: {}
-
   hookable@5.5.3: {}
 
   hosted-git-info@2.8.9: {}
@@ -14224,14 +14139,8 @@ snapshots:
 
   pathe@1.1.2: {}
 
-  pathfinding@0.4.18:
-    dependencies:
-      heap: 0.2.5
-
   pend@1.2.0: {}
 
-  perfect-arrows@0.3.7: {}
-
   perfect-debounce@1.0.0: {}
 
   performance-now@2.1.0: {}
diff --git a/tests/cypress/component/3-additional-components/background/App.vue b/tests/cypress/component/3-additional-components/background/App.vue
index d539c1eab..ef599e5cc 100644
--- a/tests/cypress/component/3-additional-components/background/App.vue
+++ b/tests/cypress/component/3-additional-components/background/App.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
diff --git a/tests/cypress/env.d.ts b/tests/cypress/env.d.ts
new file mode 100644
index 000000000..6cd694c58
--- /dev/null
+++ b/tests/cypress/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+/// <reference types="vue/macros-global" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/tests/package.json b/tests/package.json
index c9024d4c0..5d8b83779 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -8,7 +8,6 @@
     "lint": "eslint --ext .js,.ts ./"
   },
   "dependencies": {
-    "@vue-flow/background": "workspace:*",
     "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@vue-flow/minimap": "workspace:*"