add content to centered box

css/centered-box.css

@@ -1,7 +1,8 @@
 .centeredBar {
-	background: #ff00ff;
+	background: #ff00ff60;
 	width: 100%;
     height: auto;
+    
     border: none;
     pointer-events: none;
     

css/profile-image.css

@@ -0,0 +1,31 @@
+#profileImageContainer {
+	background: var(--base-bg);
+	backdrop-filter: blur(var(--blur-strength));
+
+	height: 138px;
+	width: 138px;
+	border-radius: 50%;
+	pointer-events: initial;
+    
+    margin: 0 auto;
+    margin-bottom: 90px;
+    position: relative;
+
+   	flex-flow: column wrap;
+	display: flex;
+  	justify-content: center;
+  	align-items: center;
+}
+
+#profileImage {
+	background-image: url('../assets/user.png') ;
+	height: 128px;
+	width: 128px;
+	border-radius: 50%;
+	background-size: cover;
+	
+   	flex-flow: column wrap;
+	display: flex;
+  	justify-content: center;
+  	align-items: center;
+}

css/style.css

@@ -6,6 +6,7 @@
 @import url('dock.css');
 @import url('dock-buttons.css');
 @import url('centered-box.css');
+@import url('profile-image.css');
 
 :root {
 	/* Colors */

index.html

@@ -48,7 +48,7 @@
 
 	<div class='centeredBar' id='centeredBox'>
 		<div id='profileImageContainer'>
-			<div id='profile'></div>
+			<div id='profileImage'></div>
 		</div>
 		<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder="Type to search"/>
 	</div>