added custom background options in settings page

src/js/settings.js

@@ -735,3 +735,15 @@ $(".pageSettings #resetPersonalBestsButton").on("click", (e) => {
 $(".pageSettings #updateAccountEmail").on("click", (e) => {
   SimplePopups.list.updateEmail.show();
 });
+
+$(".pageSettings .section.customBackground .inputAndButton .save").on("click", (e) => {
+  UpdateConfig.setCustomBackground($(".pageSettings .section.customBackground .inputAndButton input").val())
+});
+
+$(".pageSettings .section.customBackground .inputAndButton .cover").on("click", (e) => {
+  UpdateConfig.setCustomBackgroundSize("cover");
+});
+
+$(".pageSettings .section.customBackground .inputAndButton .contain").on("click", (e) => {
+  UpdateConfig.setCustomBackgroundSize("contain");
+});

src/sass/style.scss

@@ -2714,6 +2714,40 @@ key {
       }
     }
 
+    &.customBackground{
+      .inputAndButton{
+        display:grid;
+        grid-template-columns: 2fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        gap: 0.5rem;
+        input{
+          grid-column: 1/3;
+          grid-row: 1/2;
+        }
+
+        .save{
+          grid-column:3/4;
+          grid-row:1/2;
+          height: auto;
+
+          .fas{
+            margin-right: 0rem;
+            vertical-align: sub;
+          }
+        }
+
+        .cover{
+          grid-column:1/2;
+          grid-row:2/3;
+        }
+
+        .contain{
+          grid-column:2/4;
+          grid-row:2/3;
+        }
+      }
+    }
+
     &.customTheme {
       grid-template-columns: 1fr 1fr 1fr 1fr;
       justify-items: stretch;

static/index.html

@@ -2920,6 +2920,28 @@
                   </div>
                 </div>
               </div>
+              <div class="section customBackground">
+                <h1>custom background</h1>
+                <div class="text">
+                  Set an image url to be a custom background image. Cover fits the image to cover the screen.
+                  Contain fits the image to be fully visible.
+                </div>
+                <div class="inputAndButton">
+                  <input type="text" placeholder="image url"
+                    class="input"
+                    tabindex="0"
+                  >
+                  <div
+                    class="button save"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                  <i class="fas fa-save fa-fw"></i>
+                  </div>
+                  <div class="button cover" onclick="this.blur();">cover</div>
+                  <div class="button contain" onclick="this.blur();">contain</div>
+                </div>
+              </div>
               <div class="section themes">
                 <h1>theme</h1>
                 <div class="tabs">