Implement background image with gatsby-plugin-image

gatsby-browser.tsx

@@ -15,14 +15,6 @@ export const wrapPageElement = ({ element }) => (
     <WrapPageElementComponent>{element}</WrapPageElementComponent>
 );
 
-export const onClientEntry = () => {
-    // IntersectionObserver polyfill for gatsby-background-image (Safari, IE)
-    if (!('IntersectionObserver' in window)) {
-        import('intersection-observer');
-        console.log('# IntersectionObserver is polyfilled!!');
-    }
-};
-
 // Copied from https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-gtag/src/gatsby-browser.js
 export const onRouteUpdate = ({ location, prevLocation }) => {
     if (

package.json

@@ -24,7 +24,6 @@
     "embla-carousel": "^8.2.0",
     "embla-carousel-react": "^8.2.0",
     "gatsby": "^5.13.3",
-    "gatsby-background-image": "^1.6.0",
     "gatsby-image": "^3.11.0",
     "gatsby-omni-font-loader": "^2.0.2",
     "gatsby-plugin-canonical-urls": "^5.13.1",

src/components/AuthorBlogPostCard/index.tsx

@@ -30,7 +30,7 @@ interface AuthorBlogPostCardProps {
         };
         tags: { type: string; name: string }[];
         authors: { id: string; name: string; role?: string; picture?: any }[];
-        hero: { alternativeText: string; localFile: any };
+        hero: { alternativeText?: string; localFile: any };
     };
 }
 
@@ -59,7 +59,7 @@ const AuthorBlogPostCard = ({ data: blogPost }: AuthorBlogPostCardProps) => {
         <Link to={`/${blogPost.slug}`} className={container}>
             <GatsbyImage
                 image={blogPostImage}
-                alt={blogPost.hero.alternativeText}
+                alt={blogPost.hero.alternativeText ?? 'Blog post image'}
                 className={popularArticlesImage}
             />
             <div className={articleCardHeader}>

src/components/BackgroundImages/BackgroundWrapper.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { wrapper } from './styles.module.less';
+
+interface BackgroundWrapperProps {
+    children: React.ReactNode;
+}
+
+const BackgroundWrapper = ({ children }: BackgroundWrapperProps) => {
+    return <div className={wrapper}>{children}</div>;
+};
+
+export default BackgroundWrapper;

src/components/BackgroundImages/BigImageBackground.tsx

@@ -1,34 +1,24 @@
-import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
-import BackgroundImage from 'gatsby-background-image';
-import { backgroundIndexWrapper } from './styles.module.less';
+import { StaticImage } from 'gatsby-plugin-image';
+import clsx from 'clsx';
+import { backgroundImage, bigVector } from './styles.module.less';
+import BackgroundWrapper from './BackgroundWrapper';
 
 const BigImageBackground = ({
     children,
-    ...rest
+    className,
 }: React.BaseHTMLAttributes<HTMLDivElement>) => {
-    const imageData = useStaticQuery(graphql`
-        query {
-            background: file(relativePath: { eq: "blogs-bg.png" }) {
-                childImageSharp {
-                    fluid(quality: 90, maxWidth: 1920) {
-                        ...GatsbyImageSharpFluid_withWebp_noBase64
-                    }
-                }
-            }
-        }
-    `);
-
     return (
-        <BackgroundImage
-            fadeIn={false}
-            critical
-            className={backgroundIndexWrapper}
-            fluid={imageData.background.childImageSharp.fluid}
-            {...{ ...{ children, rest }, children: undefined }}
-        >
-            {children}
-        </BackgroundImage>
+        <BackgroundWrapper>
+            <StaticImage
+                alt=""
+                src="../../images/blogs-bg.png"
+                className={clsx(backgroundImage, bigVector)}
+                placeholder="blurred"
+                quality={100}
+            />
+            <div className={className}>{children}</div>
+        </BackgroundWrapper>
     );
 };
 

src/components/BackgroundImages/BubblesCircleBackground.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import clsx from 'clsx';
+import {
+    backgroundImage,
+    bubbleCircleBackgroundImage,
+} from './styles.module.less';
+import BackgroundWrapper from './BackgroundWrapper';
+
+const BubblesCircleBackground = ({
+    children,
+    className,
+}: React.BaseHTMLAttributes<HTMLDivElement>) => {
+    return (
+        <BackgroundWrapper>
+            <StaticImage
+                alt=""
+                src="../../images/lp-connector/take-a-tour/background.png"
+                className={clsx(backgroundImage, bubbleCircleBackgroundImage)}
+                placeholder="blurred"
+                quality={100}
+            />
+            <div className={className}>{children}</div>
+        </BackgroundWrapper>
+    );
+};
+
+export default BubblesCircleBackground;

src/components/BackgroundImages/CdcBackground.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import clsx from 'clsx';
+import { backgroundImage, cdcBackgroundImage } from './styles.module.less';
+import BackgroundWrapper from './BackgroundWrapper';
+
+const CdcBackground = ({
+    children,
+    className,
+}: React.BaseHTMLAttributes<HTMLDivElement>) => {
+    return (
+        <BackgroundWrapper>
+            <StaticImage
+                alt=""
+                src="../../images/lp-connector/change-data/background.png"
+                className={clsx(backgroundImage, cdcBackgroundImage)}
+                placeholder="blurred"
+                quality={100}
+            />
+            <div className={className}>{children}</div>
+        </BackgroundWrapper>
+    );
+};
+
+export default CdcBackground;

src/components/BackgroundImages/CirclesBackground.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import clsx from 'clsx';
+import { fullWidth, backgroundImage, fullHeight } from './styles.module.less';
+
+const CirclesBackground = ({
+    children,
+    className,
+}: React.BaseHTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={fullWidth}>
+            <StaticImage
+                alt=""
+                src="../../images/circles-background.png"
+                className={clsx(backgroundImage, fullHeight)}
+                placeholder="blurred"
+                quality={100}
+            />
+            <div className={className}>{children}</div>
+        </div>
+    );
+};
+
+export default CirclesBackground;

src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx

@@ -1,46 +1,27 @@
-import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
 
-import BackgroundImage, {
-    IBackgroundImageProps,
-} from 'gatsby-background-image';
-
 import clsx from 'clsx';
-import { sectionTopBottomPadding } from '../../globalStyles/sections.module.less';
-import { commonBackgroundImageProps } from './utils';
-
-type DarkSwoopingLinesLeftDirectionBackgroundProps = IBackgroundImageProps & {
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+import { StaticImage } from 'gatsby-plugin-image';
+import { backgroundImage, fullHeight } from './styles.module.less';
+import { backgroundColors } from './shared';
+import BackgroundWrapper from './BackgroundWrapper';
 
 const DarkSwoopingLinesLeftDirectionBackground = ({
     children,
     className,
-    ...rest
-}: DarkSwoopingLinesLeftDirectionBackgroundProps) => {
-    const swoopingLines = useStaticQuery(graphql`
-        query {
-            imageData: file(relativePath: { eq: "overlay-vector-left.png" }) {
-                childImageSharp {
-                    fluid(quality: 90, maxWidth: 2170) {
-                        ...GatsbyImageSharpFluid_withWebp_noBase64
-                    }
-                }
-            }
-        }
-    `);
-
+}: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <BackgroundImage
-            Tag="section"
-            fluid={swoopingLines.imageData.childImageSharp.fluid}
-            backgroundColor="#04192b"
-            className={clsx(sectionTopBottomPadding, className)}
-            {...commonBackgroundImageProps}
-            {...rest}
-        >
-            {children}
-        </BackgroundImage>
+        <BackgroundWrapper>
+            <StaticImage
+                alt=""
+                src="../../images/overlay-vector-left.png"
+                className={clsx(backgroundImage, fullHeight)}
+                placeholder="blurred"
+                quality={100}
+                backgroundColor={backgroundColors.dark}
+            />
+            <div className={className}>{children}</div>
+        </BackgroundWrapper>
     );
 };
 

src/components/BackgroundImages/LightSwoopingLinesRightDirectionBackground.tsx

@@ -1,48 +1,26 @@
-import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
-
-import BackgroundImage, {
-    IBackgroundImageProps,
-} from 'gatsby-background-image';
-
+import { StaticImage } from 'gatsby-plugin-image';
 import clsx from 'clsx';
-import { sectionTopBottomPadding } from '../../globalStyles/sections.module.less';
-import { commonBackgroundImageProps } from './utils';
-
-type LightSwoopingLinesRightDirectionBackgroundProps = IBackgroundImageProps & {
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+import { backgroundImage, fullHeight } from './styles.module.less';
+import { backgroundColors } from './shared';
+import BackgroundWrapper from './BackgroundWrapper';
 
 const LightSwoopingLinesRightDirectionBackground = ({
     children,
     className,
-    ...rest
-}: LightSwoopingLinesRightDirectionBackgroundProps) => {
-    const swoopingLines = useStaticQuery(graphql`
-        query {
-            imageData: file(
-                relativePath: { eq: "lp-connector/hero/Vector.png" }
-            ) {
-                childImageSharp {
-                    fluid(quality: 90, maxWidth: 2170) {
-                        ...GatsbyImageSharpFluid_withWebp_noBase64
-                    }
-                }
-            }
-        }
-    `);
-
+}: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <BackgroundImage
-            Tag="section"
-            fluid={swoopingLines.imageData.childImageSharp.fluid}
-            backgroundColor="#f9fafc"
-            className={clsx(sectionTopBottomPadding, className)}
-            {...commonBackgroundImageProps}
-            {...rest}
-        >
-            {children}
-        </BackgroundImage>
+        <BackgroundWrapper>
+            <StaticImage
+                alt=""
+                src="../../images/swooping-lines-to-the-right.png"
+                className={clsx(backgroundImage, fullHeight)}
+                placeholder="blurred"
+                quality={100}
+                backgroundColor={backgroundColors.light}
+            />
+            <div className={className}>{children}</div>
+        </BackgroundWrapper>
     );
 };
 

src/components/BackgroundImages/StraightLinesBackground.tsx

@@ -1,43 +1,26 @@
-import { graphql, useStaticQuery } from 'gatsby';
 import React from 'react';
-
-import BackgroundImage, {
-    IBackgroundImageProps,
-} from 'gatsby-background-image';
-
-import { commonBackgroundImageProps } from './utils';
-
-type StraightLinesBackgroundProps = IBackgroundImageProps & {
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+import clsx from 'clsx';
+import { StaticImage } from 'gatsby-plugin-image';
+import { backgroundImage, fullHeight } from './styles.module.less';
+import { backgroundColors } from './shared';
+import BackgroundWrapper from './BackgroundWrapper';
 
 const StraightLinesBackground = ({
     children,
-    ...rest
-}: StraightLinesBackgroundProps) => {
-    const swoopingLines = useStaticQuery(graphql`
-        query {
-            imageData: file(
-                relativePath: { eq: "lp-connector/real-time/Vector.png" }
-            ) {
-                childImageSharp {
-                    fluid(quality: 90, maxWidth: 1356) {
-                        ...GatsbyImageSharpFluid_withWebp_noBase64
-                    }
-                }
-            }
-        }
-    `);
-
+    className,
+}: React.HTMLAttributes<HTMLDivElement>) => {
     return (
-        <BackgroundImage
-            fluid={swoopingLines.imageData.childImageSharp.fluid}
-            backgroundColor="#04192b"
-            {...commonBackgroundImageProps}
-            {...rest}
-        >
-            {children}
-        </BackgroundImage>
+        <BackgroundWrapper>
+            <StaticImage
+                alt=""
+                src="../../images/lp-connector/real-time/Vector.png"
+                className={clsx(backgroundImage, fullHeight)}
+                placeholder="blurred"
+                quality={100}
+                backgroundColor={backgroundColors.dark}
+            />
+            <div className={className}>{children}</div>
+        </BackgroundWrapper>
     );
 };