Merge pull request #23 from rishavranjan943/main

adjust bg
IIITKalyaniFOSC · Jun 29, 2024 · 6c3818b · 6c3818b
2 parents 5222ea2 + d7ee45d
commit 6c3818b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/src/components/Discord/Discord.css b/src/components/Discord/Discord.css
@@ -2,27 +2,16 @@
     position: relative;
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
 
-.star-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('../../assets/images/discord/stars.svg');
-    background-size: cover;
-    background-repeat: repeat;
-    opacity: 0.9;
-    z-index: 2;
-}
-
 .bottom-overlay {
     position: absolute;
     bottom: 25%;
     left: 37%;
     width: 27%;
-    height: 23%;
+    height: 21%;
     cursor: pointer;
+    z-index: 3;
 }
diff --git a/src/components/Discord/Discord.jsx b/src/components/Discord/Discord.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Bgimage from '../../assets/images/discord/JOIN2.png';
+import stars from '../../assets/images/discord/stars.svg'
 import './Discord.css';
 
 function Discord() {
@@ -22,14 +23,21 @@ function Discord() {
 
     return (
         <div className="section">
-            <div className="star-background" style={{ transform: `translate(${bgPosition.x}px, ${bgPosition.y}px)` }}></div>
-            <img src={Bgimage} alt="" className='img-background' />
-            <a
-                href="https://discord.gg/UHwPBzy7UF"
-                className="bottom-overlay"
-                target="_blank"
-                rel="noopener noreferrer"
-            ></a>
+            <div className="relative w-screen flex items-start justify-center" style={{
+                backgroundImage: `url(${stars})`,
+                backgroundPosition: `${50 + bgPosition.x}% ${50 + bgPosition.y}%`,
+                backgroundSize: 'cover',
+            }}>
+                <img src={Bgimage} alt="Join Discord" className="img-background" />
+
+                <a
+                    href="https://discord.gg/UHwPBzy7UF"
+                    className="bottom-overlay"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                </a>
+            </div>
         </div>
     );
 }