Refactor pattern-bg css class

diff --git a/app/static/src/sass/modules/_pattern.scss b/app/static/src/sass/modules/_pattern.scss
index a3a67f7fdda07358902c4c81f51bd3c32d777f95..a843c13064d0f1c787e2287db1afa481f44d5d5d 100644 (file)
--- a/app/static/src/sass/modules/_pattern.scss
+++ b/app/static/src/sass/modules/_pattern.scss
@@ -2,23 +2,44 @@ $module: ".pattern";
 
 #{$module}-bg {
 
-    background-repeat: repeat;
-    background-position: top left;
+    position: relative;
+
+    &:after {
+        content: "";
+        background-repeat: repeat;
+        background-position: top left;
+        opacity: 0.2;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        position: absolute;
+        z-index: -1;
+    }
+
 
     &--circles {
-        background-image: url(../img/patterns/circles.png);
+        &:after {
+            background-image: url(../img/patterns/circles.png);
+        }
     }
 
     &--squares {
-        background-image: url(../img/patterns/squares.png);
+        &:after {
+            background-image: url(../img/patterns/squares.png);
+        }
     }
 
     &--stripes {
-        background-image: url(../img/patterns/stripes.png);
+        &:after {
+            background-image: url(../img/patterns/stripes.png);
+        }
     }
 
     &--triangles {
-        background-image: url(../img/patterns/triangles.png);
+        &:after {
+            background-image: url(../img/patterns/triangles.png);
+        }
     }
 
 }