Add background pattern snippets

snippets/checkerboard-pattern.md

@@ -0,0 +1,41 @@
+---
+title: Checkerboard background pattern
+tags: visual,intermediate
+---
+
+Creates a checkerboard background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with two `linear-gradient()` values, each one with a different angle to create the checkerboard pattern.
+- Use `background-size` to specify the pattern's size.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="checkerboard"></div>
+```
+
+```css
+.checkerboard {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(
+      45deg,
+      #000 25%,
+      transparent 25%,
+      transparent 75%,
+      #000 75%,
+      #000
+    ),
+    linear-gradient(
+      -45deg,
+      #000 25%,
+      transparent 25%,
+      transparent 75%,
+      #000 75%,
+      #000
+    );
+  background-size: 60px 60px;
+  background-repeat: repeat;
+}
+```

snippets/polka-dot-pattern.md

@@ -0,0 +1,28 @@
+---
+title: Polka dot background pattern
+tags: visual,intermediate
+---
+
+Creates a polka dot background pattern.
+
+- Use `background-color` to set a black background.
+- Use `background-image` with two `radial-gradient()` values to create two dots.
+- Use `background-size` to specify the pattern's size and `background-position` to appropriately place the two gradients.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="polka-dot"></div>
+```
+
+```css
+.polka-dot {
+  width: 240px;
+  height: 240px;
+  background-color: #000;
+  background-image: radial-gradient(#fff 10%, transparent 11%),
+    radial-gradient(#fff 10%, transparent 11%);
+  background-size: 60px 60px;
+  background-position: 0 0, 30px 30px;
+  background-repeat: repeat;
+}
+```

snippets/stripes-pattern.md

@@ -0,0 +1,26 @@
+---
+title: Stripes background pattern
+tags: visual,beginner
+---
+
+Creates a stripes background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with a `radial-gradient()` value to create a vertical stripe.
+- Use `background-size` to specify the pattern's size.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="stripes"></div>
+```
+
+```css
+.stripes {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
+  background-size: 60px 60px;
+  background-repeat: repeat;
+}
+```

snippets/zig-zag-pattern.md

@@ -0,0 +1,30 @@
+---
+title: Stripes background pattern
+tags: visual,advanced
+---
+
+Creates a stripes background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with four `linear-gradient()` values to create the parts of a zig zag pattern.
+- Use `background-size` to specify the pattern's size and `background-position` to place the parts of the pattern in the correct locations.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="zig-zag"></div>
+```
+
+```css
+.zig-zag {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(135deg, #000 25%, transparent 25%),
+    linear-gradient(225deg, #000 25%, transparent 25%),
+    linear-gradient(315deg, #000 25%, transparent 25%),
+    linear-gradient(45deg, #000 25%, transparent 25%);
+  background-position: -30px 0, -30px 0, 0 0, 0 0;
+  background-size: 60px 60px;
+  background-repeat: repeat;
+}
+```