[#13] Fix About image

Author: jleung51

about.html

@@ -136,7 +136,9 @@ <h2 class="m-auto black-text">TIMELINE OF COMPETITION ANNOUNCEMENTS</h2>
     </div>
 
     <div class="row">
-      <div class="col grid-background-image" style="background-image: url('res/img/chair-welcome.jpg')">
+      <div id="chair-welcome-background" class="col grid-background-image">
+        <div id="chair-welcome" class="grid-background-image">
+        </div>
       </div>
 
       <div class="col grid-text-only my-auto">

res/css/about.css

@@ -8,16 +8,28 @@
 }
 
 .grid-background-image {
-  background-color: #444444;  /* For debugging */
   height: auto;
   width: auto;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.outline {
-  border-style: solid;
+#chair-welcome-background {
+  background-image: url("../img/chair-welcome-background.jpg") !important;
+  background-size: cover;
+  background-repeat: no-repeat;
+  z-index: -1;
+}
+
+#chair-welcome {
+  background-image: url("../img/chair-welcome.jpg") !important;
+  background-size: contain;
+  background-repeat: no-repeat;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  /* border-style: solid; */
 }
 
 /* Formatting for the top-right grid */