fix bg image resize

[lolstats] / index.html
diff --git a/index.html b/index.html

index 45439741f018c0eb9517d4e960071ecd5426f115..0280138742375549b69365b31ce83a6bfa3bb8ae 100644 (file)
--- a/index.html
+++ b/index.html
@@ -2,19 +2,20 @@
  <html>
    <head>
      <meta charset="utf-8" />
-    <title>hello</title>
+    <title>lol stats</title>
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:700" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    </head>
-  <body style="font-family: 'Noto Sans SC', sans-serif; overflow: hidden; background-color: black">
+  <body style="font-family: 'Noto Sans SC', sans-serif; overflow: hidden; background-color: black" onresize="onResize()">
      <!-- Background image -->
      <!--
        <img id="background" class="w3-mobile" style="transform: scale(1.1); width: 100%; height: 100%; object-fit: contain; filter: blur(10px) contrast(110%) saturate(140%)" :src="image" />
      -->
-    <div id="background" :style="{
+    <!--
+      <div id="background" :style="{
        backgroundImage: 'url(' + image + ')',
        transform: mobile ? 'scale(1.2)' : 'scale(1.05)',
        width: '100%',
@@ -22,8 +23,15 @@
        filter: 'blur(10px) contrast(110%) saturate(140%)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
-    }">
-    </div>
+      }">
+    -->
+    <div id="background" :style="{
+    backgroundImage: 'url(' + image + ')',
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center'
+    }"></div>
      <!-- Start Screen -->
      <div id="start" v-if="visible" class="w3-display-middle w3-threequarter">
        <!-- Main panel -->