More tricks

content/tricks/index.md

@@ -105,7 +105,7 @@ Hate the skeuomorphic edge highlight on all semi-transparent elements? It's easy
 }
 ```
 
-### Horizontal Rule
+### Horizontal Rules
 
 Don't like that fancy horizontal rule? Let's make it more modern:
 
@@ -121,3 +121,27 @@ hr {
     }
 }
 ```
+
+### Background Image
+
+Want to set some nice image as a background? I got you covered:
+
+![background image](https://files.catbox.moe/kgrgqr.png)
+
+```scss
+body {
+    background: var(--bg-color), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
+}
+```
+
+Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` to your needs:
+
+```scss
+:root {
+    --bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
+
+    @media (prefers-color-scheme: dark) {
+        --bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
+    }
+}
+```