parallax bekötés

frksGeri · Nov 30, 2024 · 7625f67 · 7625f67
1 parent b2748e9
commit 7625f67
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -72,6 +72,11 @@ <h1 class="display-3 fw-lighter" style="font-family: 'Playfair Display', serif;"
             </div>
         </section>
 
+        <section class="parallax">
+            <div class="parallax_child"></div>
+        </section>
+
+
         <section class="about position-relative py-5" id="about">
             <div class="container">
                 <div class="row gy-4">
@@ -158,6 +163,10 @@ <h2 class="display-5 fw-bold mb-4" style="font-family: 'Playfair Display', serif
             </div>
         </section>
 
+        <section class="parallax">
+            <div class="parallax_child"></div>
+        </section>
+
         <section class="helptou" id="helptou">
             <div class="container">
                 <div class="row gy-4">
@@ -180,7 +189,7 @@ <h2 class="display-5 fw-bold mb-4 pb-4" style="font-family: 'Playfair Display',
     </main>
 
     <footer class="pt-5 pb-4" id="contact">
-        <div class="container" >
+        <div class="container">
             <div class="row justify-content-center">
                 <div class="col-12 col-lg-10">
                     <div class="footer-bord bg-white p-4 p-md-5 rounded">

diff --git a/style.css b/style.css
@@ -77,6 +77,24 @@ i{
     top: 120px;
 }
 
+.parallax{
+    position: relative;
+    height: 150px;
+    overflow: hidden;
+}
+
+
+.parallax .parallax_child{
+    background-image: url(media/bg.png); 
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
 /* About section reszponzív stílusok */
 .about img {
     max-width: 100%;
@@ -142,11 +160,7 @@ i{
 
 section:nth-child(4n) {
     background-color: #f4f2f3;
-    background-image: url(media/bg.png);
-    background-size: cover;
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 100%;
+
 }
 
 .slide-in-right {