Merge pull request anuragverma108#1552 from Bytebites03/Bytebites03

Change in Background UI

assets/css/contact.css

@@ -45,7 +45,7 @@ header .navbar-nav .nav-item .nav-link.active {
 }
 
 .contact-section {
-    background: url('../images/hero.jpg') no-repeat center center/cover;
+    background: ('wildlife.mp4') no-repeat center center/cover;
     padding: 3rem;
     display: flex;
     align-items: center;

assets/css/login.css

@@ -7,7 +7,7 @@
 }
 
 body {
-    background-image: url('../images/hero.jpg'); 
+    background-image: url('wildlife.mp4'); 
     background-size: cover;
     background-position: center;
     margin: 0;

assets/css/register.css

@@ -4,7 +4,7 @@
 }
 
 body {
-    background-image: url('../images/hero.jpg'); 
+    background-image: url('wildlife.mp4'); 
     background-size: cover;
     background-position: center;
     margin: 0;

assets/css/review.css

@@ -25,7 +25,7 @@ html {
 }
 
 body{
-    background-image: url('../images/hero.jpg');
+    background-image: url('wildlife.mp4');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;

assets/css/style.css

@@ -2493,13 +2493,45 @@ data {
    */
 
   .hero {
-    background-image: url('../images/hero.jpg');
+    background-image: url('wildlife.mp4');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left;
     min-height: 780px;
   }
+  .video-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+}
+
+video {
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+}
+}
 
+/* Optional: Add overlay to darken video */
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* 50% transparent black */
+    z-index: 0;
+}
   .about-hero {
     margin-top: 90px;
     background-image: url('https://images.pexels.com/photos/1062249/pexels-photo-1062249.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');

index.html

@@ -477,6 +477,15 @@ <h1>
       -->
 
       <section class="hero" id="home">
+        <div class="video-background">
+          <video autoplay muted loop>
+              <!-- Replace this video source with your live waterfall video or another hosted video -->
+              <source src="wildlife.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+          </video>
+          <div class="overlay"></div>
+      </div>
+
         <div class="container">
 
           <p class="section-subtitle">