Background blurry colors

2 files changed, 20 insertions, 0 deletions

diff --git a/blog.node5.net/static/bg.png b/blog.node5.net/static/bg.png
new file mode 100644
index 0000000..0f5c303
--- /dev/null
+++ b/blog.node5.net/static/bg.png
Binary files differdiff --git a/blog.node5.net/static/main.css b/blog.node5.net/static/main.css
index c7b153f..5617176 100644
--- a/blog.node5.net/static/main.css
+++ b/blog.node5.net/static/main.css
@@ -131,3 +131,23 @@ img {
 pre:not(#comments) {
 	border-radius: 0.5em;
 }
+
+/* Background blurred image */
+body:before {
+    content: "";
+    position: fixed; /* Change to fixed to keep it in place during scroll */
+    top: 0; /* Align to the top */
+    left: 0; /* Align to the left */
+    background: linear-gradient(
+          rgba(0, 0, 0, 0.85),
+          rgba(0, 0, 0, 0.85)
+        ), url(bg.png);
+    background-size: cover;
+    z-index: -1; /* Keep the background behind the content */
+    height: 100vh; /* Full viewport height */
+    width: 100vw; /* Full viewport width */
+
+    /* don't forget to use the prefixes you need */
+    transform: scale(1); /* Adjust scale as needed */
+    filter: blur(2em);
+}