Add a banner in the background

index.html

@@ -171,13 +171,14 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
   <!-- Main Content -->
   <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <!-- Banner Section -->
-    <section class="pattern-navy text-white rounded-xl p-8 mb-12">
-      <h1 class="text-4xl font-bold mb-4">One Platform. Full Integration. All Your E-Commerce Needs Met</h1>
-      <h2 class="text-2xl mb-6">Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency</h2>
-      <p class="text-xl mb-8">Sync Magento with Business Central</p>
+    <section class="pattern-navy text-white rounded-xl p-8 mb-12 relative overflow-hidden bg-cover bg-center" style="background-image: linear-gradient(rgba(0, 32, 96, 0.9), rgba(0, 32, 96, 0.9)), url('https://static.photos/technology/1200x630/5');">
+      <div class="relative z-10">
+        <h1 class="text-4xl font-bold mb-4">One Platform. Full Integration. All Your E-Commerce Needs Met</h1>
+        <h2 class="text-2xl mb-6">Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency</h2>
+        <p class="text-xl mb-8">Sync Magento with Business Central</p>
+      </div>
     </section>
-
-    <!-- Introduction Section -->
+<!-- Introduction Section -->
     <section class="mb-16">
       <div class="grid md:grid-cols-2 gap-8">
         <div>

style.css

@@ -1,8 +1,12 @@
+
 body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
+.bg-cover {
+	background-size: cover;
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;