diff --git a/index.html b/index.html
index 818cc1b..84bd422 100644
--- a/index.html
+++ b/index.html
@@ -40,12 +40,14 @@
   <div id="typing"></div>
 </div>
   <div class="login">
-  <p id="loginhead">jsTRR</p>
-  <p><span id="prompt">Login</span>
-  <input id="inputvalue">
-  <button id="login" type="button">OK</button>
-  <button id="reset" type="button">reset</button>
-  </p>
+  <div class="login-item">
+    <p id="loginhead">jsTRR</p>
+    <p><span id="prompt">Login</span>
+    <input id="inputvalue">
+    <button id="login" type="button">OK</button>
+    <button id="reset" type="button">reset</button>
+    </p>
+  </div>
   </div>
 
 <!-- csv.js by knrz from https://github.com/knrz/CSV.js/blob/master/csv.js -->
diff --git a/jstrr.css b/jstrr.css
index d0eabe8..b33f242 100644
--- a/jstrr.css
+++ b/jstrr.css
@@ -83,7 +83,28 @@
 input[name="text"]+button {min-width: 10em;}
 input[name="text"]:checked+button {background: yellow;}
 
-div.login, div.login2 {padding: 40% 0%;}
+/*div.login, div.login2 {padding: 40% 0%;}*/
+div.login{
+    background-color: rgb(142, 174, 235);
+    background-image: url(christmas.jpg);
+    background-position: 10% 80%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+}
+div.login-item{
+    position: absolute;
+    left: 50%; top: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+#loginhead{
+    color: white;
+}
+#prompt{
+    color: white;
+}
 
 div.login2 {
     opacity: 0; transition: 0.5s; border-radius: 50%;