diff --git a/package/src/additional-components/Background/Background.vue b/package/src/additional-components/Background/Background.vue
index 745efe01..94448579 100644
--- a/package/src/additional-components/Background/Background.vue
+++ b/package/src/additional-components/Background/Background.vue
@@ -26,7 +26,7 @@ const background = $computed(() => {
   const scaledGap = gap && gap * viewport.zoom
   const xOffset = scaledGap && viewport.x % scaledGap
   const yOffset = scaledGap && viewport.y % scaledGap
-  const bgSize = size || 0.4 * viewport.zoom
+  const bgSize = size * viewport.zoom
 
   return {
     scaledGap,
@@ -66,15 +66,17 @@ export default {
       :height="background.scaledGap"
       patternUnits="userSpaceOnUse"
     >
-      <template v-if="variant === BackgroundVariant.Lines">
-        <path :stroke="patternColor" :stroke-width="size" :d="d" />
-      </template>
-      <template v-else-if="variant === BackgroundVariant.Dots">
-        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
-      </template>
-      <svg v-if="bgColor" height="100" width="100">
-        <rect width="100%" height="100%" :fill="bgColor" />
-      </svg>
+      <slot name="pattern">
+        <template v-if="variant === BackgroundVariant.Lines">
+          <path :stroke="patternColor" :stroke-width="size" :d="d" />
+        </template>
+        <template v-else-if="variant === BackgroundVariant.Dots">
+          <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
+        </template>
+        <svg v-if="bgColor" height="100" width="100">
+          <rect width="100%" height="100%" :fill="bgColor" />
+        </svg>
+      </slot>
     </pattern>
     <rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
     <slot></slot>