content, css: generatePageLayout: fallback background rule preview

2 files changed, 16 insertions, 1 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index fa2cdc18..4c37c5af 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -578,6 +578,16 @@ export default {
           ])),
       ]));
 
+    const styleRulesCSS =
+      html.resolve(slots.styleRules, {normalize: 'string'});
+
+    const fallbackBackgroundStyleRule =
+      (styleRulesCSS.match(/body::before[^}]*background-image:/)
+        ? ''
+        : `body::before {\n` +
+          `    background-image: url("${to('media.path', 'bg.jpg')}");\n` +
+          `}`);
+
     const numWallpaperParts =
       html.resolve(slots.styleRules, {normalize: 'string'})
         .match(/\.wallpaper-part:nth-child/g)
@@ -725,6 +735,8 @@ export default {
             html.tag('style', [
               relations.colorStyleRules
                 .slot('color', slots.color ?? data.wikiColor),
+
+              fallbackBackgroundStyleRule,
               slots.styleRules,
             ]),
 
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 4d4d6416..514154a5 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -237,7 +237,10 @@ body {
 }
 
 body::before {
-  background-image: url("../../media/bg.jpg");
+  /* This is where the basic background-image rule
+   * gets applied... but the path *to* that media file
+   * isn't part of the CSS itself anymore!
+   */
 }
 
 body::before, .wallpaper-part {