diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx
index 5209d6b0..dd68fc42 100644
--- a/src/additional-components/Background/index.tsx
+++ b/src/additional-components/Background/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useMemo, HTMLAttributes } from 'react';
+import React, { memo, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
@@ -34,25 +34,26 @@ const Background = ({
   const xOffset = x % scaledGap;
   const yOffset = y % scaledGap;
 
-  const bgSvgTile = useMemo(() => {
-    const isLines = variant === BackgroundVariant.Lines;
-    const bgColor = color ? color : defaultColors[variant];
-    const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
 
-    return encodeURIComponent(
-      `<svg width="${scaledGap}" height="${scaledGap}" xmlns='http://www.w3.org/2000/svg'>${path}</svg>`
-    );
-  }, [variant, scaledGap, size, color]);
+	const isLines = variant === BackgroundVariant.Lines;
+	const bgColor = color ? color : defaultColors[variant];
+	const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
 
   return (
-    <div
+    <svg
       className={bgClasses}
       style={{
-        ...style,
-        backgroundImage: `url("data:image/svg+xml;utf8,${bgSvgTile}")`,
-        backgroundPosition: `${xOffset}px ${yOffset}px`,
+				...style,
+				width: "100%",
+				height: "100%"
       }}
-    ></div>
+    >
+			<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
+				{path}
+			</pattern>
+
+			<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+		</svg>
   );
 };
 
diff --git a/src/additional-components/Background/utils.ts b/src/additional-components/Background/utils.ts
deleted file mode 100644
index c0b6d315..00000000
--- a/src/additional-components/Background/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const createGridLinesPath = (scaledGap: number, strokeWidth: number, stroke: string): string => {
-  return `<path stroke="${stroke}" strokeWidth="${strokeWidth}" d="M0 0 V${scaledGap} M0 0 H${scaledGap}" />`;
-};
-
-export const createGridDotsPath = (size: number, fill: string): string => {
-  return `<circle cx="${size}" cy="${size}" r="${size}" fill="${fill}" />`;
-};
diff --git a/src/additional-components/Background/utils.tsx b/src/additional-components/Background/utils.tsx
new file mode 100644
index 00000000..d16fdfc8
--- /dev/null
+++ b/src/additional-components/Background/utils.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string): React.ReactElement => {
+  return <path stroke={stroke} strokeWidth={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`}  />;
+};
+
+export const createGridDotsPath = (size: number, fill: string): React.ReactElement => {
+  return <circle cx={size / 2} cy={size / 2} r={size} fill={fill} />;
+};