diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 6efb648bf..c49b6d6f2 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -584,6 +584,7 @@ export class CanvasRenderer extends Renderer {
 
     async renderBackgroundImage(container: ElementContainer): Promise<void> {
         let index = container.styles.backgroundImage.length - 1;
+        const repeatTypes = ['repeat', 'no-repeat', 'repeat-x', 'repeat-y'];
         for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
             if (backgroundImage.type === CSSImageType.URL) {
                 let image;
@@ -602,7 +603,7 @@ export class CanvasRenderer extends Renderer {
                     ]);
                     const pattern = this.ctx.createPattern(
                         this.resizeImage(image, width, height),
-                        'repeat'
+                        repeatTypes[+container.styles.backgroundRepeat || 0]
                     ) as CanvasPattern;
                     this.renderRepeat(path, pattern, x, y);
                 }
@@ -623,7 +624,10 @@ export class CanvasRenderer extends Renderer {
                 ctx.fillStyle = gradient;
                 ctx.fillRect(0, 0, width, height);
                 if (width > 0 && height > 0) {
-                    const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern;
+                    const pattern = this.ctx.createPattern(
+                        canvas,
+                        repeatTypes[+container.styles.backgroundRepeat || 0]
+                    ) as CanvasPattern;
                     this.renderRepeat(path, pattern, x, y);
                 }
             } else if (isRadialGradient(backgroundImage)) {
diff --git a/tests/assets/edges.png b/tests/assets/edges.png
new file mode 100644
index 000000000..dfe758445
Binary files /dev/null and b/tests/assets/edges.png differ
diff --git a/tests/reftests/background/repeat.html b/tests/reftests/background/repeat.html
index ed3ae6a25..d60fa90eb 100644
--- a/tests/reftests/background/repeat.html
+++ b/tests/reftests/background/repeat.html
@@ -35,6 +35,26 @@
                 display:block;
             }
 
+            .shared-area {
+                text-align: center;
+                border: solid .5em #0d47a1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-around;
+                background-color: white;
+            }
+
+            .edges {
+                width: 80%;
+                height: 50%;
+                background-size: contain;
+                background-position: center center;
+                background-image: url('../../assets/edges.png');
+                background-color: white;
+                background-repeat: no-repeat;
+            }
+
         </style>
 
     </head>
@@ -45,12 +65,20 @@
             <div style="background:url(../../assets/image.jpg) repeat-x;"></div>
             <div style="background:url(../../assets/image.jpg) repeat-y;"></div>
             <div style="background:url(../../assets/image.jpg) no-repeat;"></div>
+            <div class="shared-area">
+                <p class="edges"></p>
+                <p class="caption">Edges</p>
+            </div>
         </div>
         <div class="small">
             <div style="background:url(../../assets/image.jpg);"></div>
             <div style="background:url(../../assets/image.jpg) repeat-x;"></div>
             <div style="background:url(../../assets/image.jpg) repeat-y;"></div>
             <div style="background:url(../../assets/image.jpg) no-repeat;"></div>
+            <div class="shared-area">
+                <p class="edges"></p>
+                <p class="caption">Edges</p>
+            </div>
         </div>
 
     </body>