Better login backgrounds! (#1852)

* Background center and fix for gray border

Center the background using `background-size: cover;`. Looks better on mobile now. Change img to div to avoid
gray border around image in chrome and safari.

* Remove fat-fingered typo

src/Ombi/ClientApp/app/landingpage/landingpage.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="landingPageSettings && customizationSettings">
-    <img *ngIf="background" class="landingDiv bg" [style.background-image]="background" />
+    <div *ngIf="background" class="bg" [style.background-image]="background"></div>
 
     <div class="centered col-md-12">
         <div class="row">

src/Ombi/ClientApp/app/landingpage/landingpage.component.scss

@@ -1,29 +1,19 @@
-landingDiv {
+div.centered {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-}
-
-div.centered {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
-img.bg {
+div.bg {
-    /* Set rules to fill background */
+    background-position: center center;
-    min-height: 100%;
+    background-repeat: no-repeat;
-    min-width: 1024px;
+    background-attachment: fixed;
-    /* Set up proportionate scaling */
+    background-clip: inherit;
-    width: 100%;
+    background-size: cover;
-    height: auto;
+    height: 100vh;
-    /* Set up positioning */
+    width: 100vw;
     position: fixed;
-    top: 0;
-    left: 0;
-    z-index: -1;
 }
 
 .vcenter {
@@ -47,12 +37,4 @@ img.bg {
 
 p {
     font-size: 14px !important;
-}
+}
-
-
-@media screen and (max-width: 1024px) { /* Specific to this particular image */
-    img.bg {
-        left: 50%;
-        margin-left: -512px; /* 50% */
-    }
-}

src/Ombi/ClientApp/app/login/login.component.html

@@ -4,7 +4,7 @@ include the remember me checkbox
 -->
 <div *ngIf="form && customizationSettings">
 
-    <img *ngIf="background" class="landingDiv bg" [style.background-image]="background" />
+    <div *ngIf="background" class="bg" [style.background-image]="background"></div>
     <div class="container" id="login">
         <div class="card card-container">
             <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->

src/Ombi/ClientApp/app/login/login.component.scss

@@ -16,36 +16,21 @@ body, html {
     background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;
 }
 
-landingDiv {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-}
-
 img.center {
     display: block;
     margin: 0 auto;
     max-width: 100%;
 }
 
-img.bg {
+div.bg {
-    /* Set rules to fill background */
+    background-position: center center;
-    min-height: 100%;
+    background-repeat: no-repeat;
-    min-width: 1024px;
+    background-attachment: fixed;
-    /* Set up proportionate scaling */
+    background-clip: inherit;
-    width: 100%;
+    background-size: cover;
-    height: auto;
+    height: 100vh;
-    /* Set up positioning */
+    width: 100vw;
     position: fixed;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    /*-webkit-filter: blur(5px);
-    -moz-filter: blur(5px);
-    -o-filter: blur(5px);
-    -ms-filter: blur(5px);
-    filter: blur(5px);*/
 }
 
 .card-container.card {

src/Ombi/ClientApp/app/login/resetpassword.component.html

@@ -3,7 +3,7 @@ you can substitue the span of reauth email for a input with the email and
 include the remember me checkbox
 -->
 <div *ngIf="form && customizationSettings && background">
-        <img class="landingDiv bg" [style.background-image]="background" />
+        <div class="bg" [style.background-image]="background"></div>
     <div class="container" id="login">
         <div class="card card-container">
             <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->