From e9a052870c37081ecccf0aa81749aaea487afd68 Mon Sep 17 00:00:00 2001
From: Will O'Beirne <wbobeirne@gmail.com>
Date: Wed, 6 Mar 2019 18:39:44 -0500
Subject: [PATCH] Change homepage splash image to background image that keeps
 its place before loading.

---
 frontend/client/components/Home/Intro.less | 10 +++++++---
 frontend/client/components/Home/Intro.tsx  |  7 ++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/client/components/Home/Intro.less b/frontend/client/components/Home/Intro.less
index 1082ccb3..e6bcea83 100644
--- a/frontend/client/components/Home/Intro.less
+++ b/frontend/client/components/Home/Intro.less
@@ -96,11 +96,15 @@
   }
 
   &-illustration {
+    position: relative;
+    width: 100%;
     max-width: 640px;
+    background-size: contain;
 
-    img {
-      width: 100%;
-      height: auto;
+    &:after {
+      content: '';
+      display: block;
+      padding-top: 86.3%; // Aspect ratio of img
     }
 
     @media @thin-query {
diff --git a/frontend/client/components/Home/Intro.tsx b/frontend/client/components/Home/Intro.tsx
index 37d96bf4..e804acf1 100644
--- a/frontend/client/components/Home/Intro.tsx
+++ b/frontend/client/components/Home/Intro.tsx
@@ -32,9 +32,10 @@ const HomeIntro: React.SFC<Props> = ({ t, authUser }) => (
         </a>
       </div>
     </div>
-    <div className="HomeIntro-illustration">
-      <img src={HomeIllustration} />
-    </div>
+    <div
+      className="HomeIntro-illustration"
+      style={{ backgroundImage: `url(${HomeIllustration})` }}
+    />
   </div>
 );