changed background

inc/header.php

@@ -1,12 +1,30 @@
-<?php require_once __DIR__ . '/../config.php'; ?>
+<?php
+require_once __DIR__ . '/../config.php';
+require_once __DIR__ . '/backgrounds.php';
+$bgs = bg_styles();
+$bgPick = bg_pick();
+// the page picks a style per request, so don't let a cached copy pin one
+header('Cache-Control: no-store');
+?>
 <!doctype html>
-<html lang="en">
+<html lang="en"<?= $bgPick !== '' ? ' data-bg="' . htmlspecialchars($bgPick) . '"' : '' ?>>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><?= htmlspecialchars($page_title ?? SITE_TITLE) ?></title>
   <link rel="icon" href="/img/favicon.ico" sizes="any">
   <link rel="stylesheet" href="/css/style.css">
+<?php if ($bgs): ?>
+  <style>
+    /* One custom property per style; data-bg on <html> selects which.
+       Only the matching rule's url() is ever fetched, so the styles that
+       are not showing cost nothing but a line of CSS. */
+    :root { --bg-img: url("/img/bg/<?= rawurlencode(bg_default()) ?>.png"); }
+<?php foreach ($bgs as $b): ?>
+    html[data-bg="<?= htmlspecialchars($b) ?>"] { --bg-img: url("/img/bg/<?= rawurlencode($b) ?>.png"); }
+<?php endforeach; ?>
+  </style>
+<?php endif; ?>
   <script src="/js/htmx.min.js" defer></script>
   <script src="/js/idiomorph-ext.min.js" defer></script>
 </head>