use smaller png for cover

website/src/pages/index.tsx

@@ -125,62 +125,71 @@ function useFilteredUsers() {
 }
 
 function ShowcaseTemplateSearch() {
-  const cover = useBaseUrl("/img/cover.png");
   return (
-    <div className={styles.searchArea}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
+    <div className={styles.searchContainer}>
+      <img
+        src={useBaseUrl("/img/coverBackground.png")}
+        className={styles.cover}
+        onError={({ currentTarget }) => {
+          currentTarget.style.display = "none"; 
         }}
-      >
+        alt=""
+      />
+      <div className={styles.searchArea}>
         <div
-          className={styles.heroBar}
           style={{
-            textAlign: "center",
+            display: "flex",
+            flexDirection: "column",
           }}
         >
+          <div
+            className={styles.heroBar}
+            style={{
+              textAlign: "center",
+            }}
+          >
+            <Text
+              size={800}
+              weight="semibold"
+              style={{
+                background:
+                  "linear-gradient(90deg, rgb(112.68, 94.63, 239.06) 0%, rgb(41.21, 120.83, 190.19) 100%)",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+              }}
+            >
+              {TITLE}
+            </Text>
+          </div>
           <Text
-            size={800}
-            weight="semibold"
+            align="center"
+            size={400}
             style={{
-              background:
-                "linear-gradient(90deg, rgb(112.68, 94.63, 239.06) 0%, rgb(41.21, 120.83, 190.19) 100%)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
+              color: "#242424",
+              padding: "10px 0 20px 0",
             }}
           >
-            {TITLE}
+            {DESCRIPTION}
           </Text>
-        </div>
-        <Text
-          align="center"
-          size={400}
-          style={{
-            color: "#242424",
-            padding: "10px 0 20px 0",
-          }}
-        >
-          {DESCRIPTION}
-        </Text>
-        <FilterBar id="filterBar" />
-        <Text
-          align="center"
-          size={300}
-          style={{
-            color: "#242424",
-            padding: "20px 0",
-          }}
-        >
-          Not familiar with the Azure Developer CLI (azd)?
-          <FluentUILink
-            href={ADD_URL}
-            target="_blank"
-            style={{ paddingLeft: "3px", color: "#7160E8" }}
+          <FilterBar id="filterBar" />
+          <Text
+            align="center"
+            size={300}
+            style={{
+              color: "#242424",
+              padding: "20px 0",
+            }}
           >
-            Learn more
-          </FluentUILink>
-        </Text>
+            Not familiar with the Azure Developer CLI (azd)?
+            <FluentUILink
+              href={ADD_URL}
+              target="_blank"
+              style={{ paddingLeft: "3px", color: "#7160E8" }}
+            >
+              Learn more
+            </FluentUILink>
+          </Text>
+        </div>
       </div>
     </div>
   );
@@ -640,7 +649,6 @@ function ShowcaseCards() {
     </section>
   );
 }
-
 export default function Showcase(): JSX.Element {
   return (
     <FluentProvider theme={teamsLightTheme}>

website/src/pages/styles.module.css

@@ -24,10 +24,22 @@
   margin-right: 0;
 }
 
+.cover{
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.searchContainer{
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
 .searchArea {
-  background-image: url("/img/cover.svg");
-  background-size: cover;
-  background-repeat: "no-repeat";
+  position: relative;
   width: 100%;
   height: 300px;
   display: flex;