Bg on front splash

Author: emilkarl

.eslintrc.js

@@ -12,11 +12,14 @@ module.exports = {
   env: {
     browser: true,
   },
+  parserOptions: {
+    sourceType: 'module',
+  },
   overrides: [
     {
       files: ['gatsby-*.js'],
       parserOptions: {
-        sourceType: 'script',
+        sourceType: 'module',
         ecmaVersion: 2015,
       },
       env: {

gatsby-browser.js

@@ -4,4 +4,10 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-// You can delete this file if you're not using it
+export const onClientEntry = () => {
+  // IntersectionObserver polyfill for gatsby-background-image (Safari, IE)
+  if (typeof window.IntersectionObserver === `undefined`) {
+    import(`intersection-observer`)
+    console.log(`# IntersectionObserver is polyfilled!`)
+  }
+}

package.json

@@ -7,17 +7,19 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "gatsby": "^2.15.28",
+    "gatsby-background-image": "^0.8.17",
     "gatsby-image": "^2.2.23",
     "gatsby-plugin-manifest": "^2.2.20",
     "gatsby-plugin-netlify": "^2.1.17",
     "gatsby-plugin-offline": "^3.0.11",
     "gatsby-plugin-preload-fonts": "^1.0.14",
     "gatsby-plugin-react-helmet": "^3.1.10",
     "gatsby-plugin-sass": "^2.1.17",
-    "gatsby-plugin-sharp": "^2.2.27",
+    "gatsby-plugin-sharp": "^2.2.36",
     "gatsby-source-filesystem": "^2.1.28",
-    "gatsby-transformer-sharp": "^2.2.19",
+    "gatsby-transformer-sharp": "^2.3.2",
     "inter-ui": "^3.10.0",
+    "intersection-observer": "^0.7.0",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.10.1",

src/components/sections/base-with-bg.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import BackgroundImage from 'gatsby-background-image'
+import styled from 'styled-components'
+
+const SectionBaseWithBg = ({ children, className, backgroundImage }) => {
+  const images = useStaticQuery(
+    graphql`
+      query {
+        splashFront: file(relativePath: { eq: "splash-front.png" }) {
+          childImageSharp {
+            fluid(quality: 90, maxWidth: 3360) {
+              ...GatsbyImageSharpFluid_withWebp
+            }
+          }
+        }
+      }
+    `
+  )
+
+  const image = images[backgroundImage]
+  console.log(image)
+  return (
+    <BackgroundImage
+      Tag="section"
+      className={className}
+      fluid={image.childImageSharp.fluid}
+      backgroundColor={`#040e18`}
+    >
+      {children}
+    </BackgroundImage>
+  )
+}
+
+const StyledSectionBaseWithBg = styled(SectionBaseWithBg)`
+  width: 100%;
+  background-position: bottom center;
+  background-repeat: repeat-y;
+  background-size: cover;
+`
+
+export default StyledSectionBaseWithBg

src/components/sections/base.js

@@ -2,12 +2,25 @@ import React from 'react'
 
 import classNames from 'classnames'
 
-const SectionBase = ({ children, style, theme }) => {
+import SectionBaseWithBg from './base-with-bg'
+
+const SectionBase = ({ children, style, theme, backgroundImage }) => {
   let sectionClasses = classNames('section', {
     [`section--${theme}`]: theme,
     [`section--${style}`]: style,
   })
-  return <section className={sectionClasses}>{children}</section>
+  if (backgroundImage) {
+    return (
+      <SectionBaseWithBg
+        className={sectionClasses}
+        backgroundImage={backgroundImage}
+      >
+        {children}
+      </SectionBaseWithBg>
+    )
+  } else {
+    return <section className={sectionClasses}>{children}</section>
+  }
 }
 
 export default SectionBase

src/components/sections/splash.js

@@ -2,8 +2,8 @@ import React from 'react'
 
 import SectionBase from './base'
 
-const SectionSplash = ({ children }) => (
-  <SectionBase theme="dark" style="splash">
+const SectionSplash = ({ children, backgroundImage }) => (
+  <SectionBase theme="dark" style="splash" backgroundImage={backgroundImage}>
     <div className="wrapper">{children}</div>
   </SectionBase>
 )

src/images/splash-front.png

@@ -14,7 +14,7 @@ const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
     <div className="u-height--viewport u-display--flex u-flex-direction--column">
-      <SectionSplash>
+      <SectionSplash backgroundImage="splashFront">
         <div className="section__content">
           <h1 className="u-margin-top--xl">Secure, fast & easy.</h1>
           <p className="u-font-size--large">

src/pages/index.js

@@ -28,6 +28,7 @@
   &--splash {
     padding: 0;
     flex: 1;
+    background-size: cover;
   }
 
   &--splash & {