Added login background

frontend/src/App.vue

@@ -64,7 +64,8 @@ export default {
   }
 
   #app{
-    margin: 2em 1em;
+    margin: 0 1em;
+    padding-top: 1.5em;
   }
 
   .menu-avatar{

frontend/src/components/Login.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="login-wrapper">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui blue image header">
@@ -17,7 +18,8 @@
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
-              <input type="password" name="password" placeholder="Password" v-model="credentials.password" @keyup.enter="submit">
+                <input type="password" name="password" placeholder="Password" v-model="credentials.password"
+                       @keyup.enter="submit">
               </div>
             </div>
             <div class="ui fluid large blue submit button" @click="submit()">Login</div>
@@ -35,6 +37,7 @@
         </form>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -76,16 +79,10 @@
 </script>
 
 <style scoped>
-  body {
-    background-color: #efefef;
-    margin-top: -1em;
-  }
-  body > .grid {
-    height: 100%;
-  }
   .image {
     margin-top: -100px;
   }
+
   .column {
     max-width: 450px;
   }
@@ -93,4 +90,15 @@
   .error.message {
     display: block;
   }
+
+  .login-wrapper {
+    background: url("../../static/bg.jpg") no-repeat center;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding-top: 5em;
+  }
 </style>