Implement background image with gatsby-plugin-image

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/BigImageBackground.tsx

@@ -1,34 +1,33 @@
-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';
 
 const BigImageBackground = ({
     children,
-    ...rest
 }: 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>
+        <>
+            <StaticImage
+                layout="fullWidth"
+                alt=""
+                src="../../images/blogs-bg.png"
+                formats={['auto', 'webp', 'avif']}
+                style={{
+                    position: 'absolute',
+                    right: 0,
+                    width: '100%',
+                }}
+            />
+            <div
+                style={{
+                    position: 'relative',
+                    display: 'grid',
+                    gridArea: '1/1',
+                    placeItems: 'center',
+                }}
+            >
+                {children}
+            </div>
+        </>
     );
 };
 

src/components/seo.tsx

@@ -84,7 +84,7 @@ const Seo: React.FC<SeoProps> = ({
                 name="viewport"
                 content="width=device-width, initial-scale=1.0"
             />
-            <meta name="apple-mobile-web-app-capable" content="yes" />
+            <meta name="mobile-web-app-capable" content="yes" />
             {children}
             <script type="application/ld+json">
                 {JSON.stringify({