From d1d1e554de6603a74d63633bf4849d34e0db6256 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Fri, 1 Jun 2018 15:50:16 +1000
Subject: [PATCH] BackgroundImage updates

---
 CHANGELOG.md                       |  1 +
 src/components/BackgroundImage.css |  3 ++-
 src/components/BackgroundImage.js  | 17 +++++++++++++++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c19694e..7eaf6fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 * Improved default logo / favicon
 * Improved default card-og.png
 * Improved contact page layout
+* Update <BackgroundImage />
 * Change normalize.css to modern-normalize
 * Add react-feather icons
 * Remove AOS
diff --git a/src/components/BackgroundImage.css b/src/components/BackgroundImage.css
index 59d1da2..0c20437 100644
--- a/src/components/BackgroundImage.css
+++ b/src/components/BackgroundImage.css
@@ -5,7 +5,8 @@
   bottom: 0;
   right: 0;
   background-position: center;
-  transition: opacity 0.5s ease;
+  transform: translate3d(0, 0, 0);
+  transition: filter 0.3s ease-in-out;
   overflow: hidden;
 }
 
diff --git a/src/components/BackgroundImage.js b/src/components/BackgroundImage.js
index 236fa59..b4d9b22 100644
--- a/src/components/BackgroundImage.js
+++ b/src/components/BackgroundImage.js
@@ -54,8 +54,22 @@ export default class BackgroundImage extends React.Component {
   }
 
   render () {
-    let { className, contain, opacity, lazy } = this.props
+    let { className, contain, opacity, lazy, imageSize } = this.props
     let { loaded, src } = this.state
+
+    if (!lazy) {
+      return (
+        <div
+          className={`BackgroundImage absolute ${className}`}
+          style={{
+            backgroundImage: `url(${getImageSrc(this.props.src, imageSize)})`,
+            backgroundSize: contain ? 'contain' : 'cover',
+            opacity: opacity
+          }}
+        />
+      )
+    }
+
     if (loaded) className += ' BackgroundImage-lazy-loaded'
     if (lazy) className += ' BackgroundImage-lazy'
     const options = {
@@ -68,7 +82,6 @@ export default class BackgroundImage extends React.Component {
       <Observer {...options}>
         <div
           className={`BackgroundImage absolute ${className}`}
-          src={src}
           style={{
             backgroundImage: `url(${src})`,
             backgroundSize: contain ? 'contain' : 'cover',