From 1a6bcb8dab3ae04e32ad13347f2c05f3b5198dbc Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sun, 21 Jul 2024 21:52:32 +0300
Subject: [PATCH] More tricks

---
 content/tricks/index.md | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/content/tricks/index.md b/content/tricks/index.md
index d14841c..1a8c780 100644
--- a/content/tricks/index.md
+++ b/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));
+    }
+}
+```