2 files changed, 21 insertions, 1 deletions
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index a895fe9a..fa2cdc18 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -1,5 +1,5 @@
 import {openAggregate} from '#aggregate';
-import {empty} from '#sugar';
+import {empty, repeat} from '#sugar';
 
 export default {
   contentDependencies: [
@@ -578,6 +578,18 @@ export default {
           ])),
       ]));
 
+    const numWallpaperParts =
+      html.resolve(slots.styleRules, {normalize: 'string'})
+        .match(/\.wallpaper-part:nth-child/g)
+        ?.length ?? 0;
+
+    const wallpaperPartsHTML =
+      html.tag('div', {class: 'wallpaper-parts'},
+        {[html.onlyIfContent]: true},
+
+        repeat(numWallpaperParts, () =>
+          html.tag('div', {class: 'wallpaper-part'})));
+
     const layoutHTML = [
       navHTML,
 
@@ -734,6 +746,8 @@ export default {
 
           html.tag('body',
             [
+              wallpaperPartsHTML,
+
               html.tag('div', {id: 'page-container'},
                 showingSidebarLeft &&
                   {class: 'showing-sidebar-left'},
diff --git a/src/static/css/site.css b/src/static/css/site.css
index d20a0046..ed409930 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -40,6 +40,9 @@ body {
 
 body::before {
   content: "";
+}
+
+body::before, .wallpaper-part {
   position: fixed;
   top: 0;
   left: 0;
@@ -231,6 +234,9 @@ body {
 
 body::before {
   background-image: url("../../media/bg.jpg");
+}
+
+body::before, .wallpaper-part {
   background-position: center;
   background-size: cover;
   opacity: 0.5;