add a banner as a background for that full line " AyvWvlid

HER
الرئيسية
المنتجات
عن المتجر
اتصل بنا"

animated ring photo

index.html

@@ -12,7 +12,11 @@
             box-sizing: border-box;
             font-family: 'Tajawal', sans-serif;
         }
-        body {
+        @keyframes ringSpin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+body {
             background-color: #f8f8f8;
             color: #333;
         }
@@ -24,8 +28,10 @@
             display: flex;
             align-items: center;
             position: relative;
+            z-index: 1;
+            text-shadow: 0 0 10px rgba(255,255,255,0.8);
         }
-        .logo-owner {
+.logo-owner {
             font-size: 0.8rem;
             margin-right: 0.5rem;
             color: #666;
@@ -57,18 +63,47 @@
             background-size: 400% 400%;
         }
 header {
-            background-color: white;
+            background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), 
+                        url('http://static.photos/jewelry/1200x630/1');
+            background-size: cover;
+            background-position: center;
             padding: 1rem 2rem;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            position: relative;
+            overflow: hidden;
+        }
+        header::after {
+            content: "";
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200px;
+            height: 200px;
+            background-image: url('http://static.photos/jewelry/200x200/2');
+            background-size: contain;
+            background-repeat: no-repeat;
+            animation: ringSpin 20s linear infinite;
+            opacity: 0.7;
+            z-index: 0;
         }
         nav ul {
             display: flex;
             list-style: none;
+            position: relative;
+            z-index: 1;
+        }
+        nav ul li a {
+            text-shadow: 0 0 10px rgba(255,255,255,0.8);
+            transition: all 0.3s ease;
+        }
+        nav ul li a:hover {
+            color: #ff6b6b;
+            transform: scale(1.1);
         }
-        nav ul li {
+nav ul li {
             margin-right: 1.5rem;
         }
         nav ul li a {