Add background

src/App.css

@@ -4,22 +4,41 @@
   padding: 2rem;
   text-align: center;
 }
-p.vignette {
+div.vignette {
   position: relative;
+  display: flex;
+  justify-content: flex-end; /* align items to the end horizontally */
+  height: 906px; /* Assuming the height to be same as .box */
+  overflow: hidden; /* to handle if image is larger than container */
 }
-p.vignette img {
- display: block;
+div.vignette img {
+  display: block;
+  max-width: 100%; /* restrict image size to not overflow its container */
+  height: auto; /* maintain aspect ratio */
+}
+div.vignette:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  -webkit-box-shadow: inset 200px 0px 143px -22px rgba(255, 255, 255, 1);
+  -moz-box-shadow: inset 200px 0px 143px -22px rgba(255, 255, 255, 1);
+  box-shadow: inset 200px 0px 143px -22px rgba(255, 255, 255, 1);
+}
+
+.box {
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 0 auto;
+  border: 0px none;
+  width: 1512px;
+  -webkit-backdrop-filter: blur(40px) brightness(100%);
+  backdrop-filter: blur(40px) brightness(100%);
+  background-color: #09101cf5;
+  height: 906px;
+  width: 1512px;
 }
-p.vignette:after {
- 
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 2;
- content: "";
- -webkit-box-shadow: inset 200px 0px 143px -22px rgba(255,255,255,1);
- -moz-box-shadow: inset 200px 0px 143px -22px rgba(255,255,255,1);
- box-shadow: inset 200px 0px 143px -22px rgba(255,255,255,1);
-}

src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx

@@ -1,9 +1,9 @@
 const DeviceHealthCheck = () => {
   return (
-    <div>
-      <p className="vignette">
+    <div className="box">
+      <div className="vignette">
         <img src="/background-images/eye-background.png" alt="eye-background" />
-      </p>
+      </div>
     </div>
   );
 };