add randomized background images

groups/home/bootstrap5/home1.css

@@ -204,12 +204,6 @@
 
   /* style background image */
   .kbcc-background-image {
-    background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.6) 0%,
-        rgba(255, 255, 255, 0.6) 100%
-      ),
-      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
     background-position: 50% 71%;
     padding: 20px 0;
     border-radius: 5px;

groups/home/bootstrap5/home1.js

@@ -436,3 +436,19 @@ const app2 = createApp({
 });
 app2.mount("#app2");
 
+// Randomly set the background image for .kbcc-background-image
+(function () {
+  const images = [
+    "https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/copy_for_it.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_005.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_002.jpg",
+  ];
+  var picked = images[Math.floor(Math.random() * images.length)];
+  var el = document.querySelector(".kbcc-background-image");
+  if (el) {
+    el.style.backgroundImage =
+      "linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url('" + picked + "')";
+  }
+})();
+