Add fade transition to background changes.

public/now.css

@@ -2,6 +2,8 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    position: relative;
+    outline-style: none;
 }
 
 html,
@@ -77,8 +79,19 @@ a:focus {
     height: 100%;
     width: 100%;
     transition: background-color 2.1s;
+}
+.background img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
     filter: blur(10px);
     transform: scale(1.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: z-index, opacity;
+    opacity: 1;
+    transition: opacity .5s;
 }
 
 .index__title {

public/now.js

@@ -9,6 +9,8 @@ var fnp = {
     },
     ui: {
         mode: '',
+        bgSwitch: false,
+        currBg: '',
     },
 };
 
@@ -128,13 +130,71 @@ fnp.ui.setBackground = function(bgPath) {
     }
 
     this.eBg.style.backgroundColor = null;
-    this.eBg.style.backgroundImage = 'url(\'' + (bgPath || '').toString() + '\')';
+    this.switchBackground(bgPath);
+};
+fnp.ui.switchBackground = function(bgPath) {
+    if(bgPath === this.currBg)
+        return;
+    this.currBg = bgPath;
+
+    if(this.bgSwitch) {
+        setTimeout(this.switchBackground.bind(this, bgPath), 1000);
+        return;
+    }
+    this.bgSwitch = true;
+
+    while(this.eBg.children.length > 2)
+        this.eBg.removeChild(eBg.firstChild);
+
+    var newBg = null,
+        hasNewBg = !!bgPath,
+        oldBg = this.eBg.firstChild,
+        hasOldBg = !!oldBg;
+
+    if(hasOldBg)
+        oldBg.style.zIndex = '-1';
+
+    if(hasNewBg) {
+        newBg = document.createElement('img');
+        newBg.alt = newBg.src = bgPath;
+        newBg.style.opacity = '0';
+        newBg.style.zIndex = '1';
+        newBg.onload = function() {
+            setTimeout(function() {
+                newBg.style.opacity = null;
+                setTimeout(function() {
+                    newBg.style.zIndex = null;
+                    if(hasOldBg)
+                        this.eBg.removeChild(oldBg);
+                    this.bgSwitch = false;
+                }.bind(this), 500);
+            }.bind(this), 50);
+        }.bind(this);
+        newBg.onerror = function() {
+            this.eBg.removeChild(newBg);
+            newBg = null;
+            hasNewBg = false;
+            this.bgSwitch = false;
+        }.bind(this);
+        this.eBg.appendChild(newBg);
+    } else if(hasOldBg) {
+        oldBg.style.opacity = '0';
+        setTimeout(function() {
+            this.eBg.removeChild(oldBg);
+            this.bgSwitch = false;
+        }.bind(this), 500);
+    } else {
+        this.bgSwitch = false;
+    }
+};
+fnp.ui.removeBackground = function() {
+    this.switchBackground('');
 };
 fnp.ui.setBackgroundFade = function() {
     if(this.iColourFade !== 0)
         return;
 
-    this.eBg.style.backgroundImage = null;
+    this.removeBackground();
 
     var fader = function() {
         var colour = Math.floor(Math.random() * 0xFFFFFF).toString(16);