BackgroundImage updates

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

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;
 }
 

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',