Profile header style

epicyon-profile.css

@@ -256,8 +256,6 @@ a:focus {
     position: relative;
     overflow: hidden;
     margin: 10px;
-    min-width: 230px;
-    max-width: 315px;
     width: 100%;
     color: #ffffff;
     text-align: left;
@@ -271,7 +269,7 @@ a:focus {
     bottom: 100%;
     left: 25px;
     z-index: 1;
-    max-width: 90px;
+    max-width: 20%;
     opacity: 1;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
 }
@@ -283,10 +281,10 @@ a:focus {
     transition: all 0.25s ease;
 }
 
-.profileHeader img {
-    max-width: 100%;
+.profileHeader img.profileBackground {
+    width: 100%;
+    height: 20vw;
     vertical-align: top;
-    opacity: 0.85;
 }
 
 .profileHeader figcaption {

webapp_profile.py

@@ -284,7 +284,8 @@ def getProfileHeader(baseDir: str, nickname: str, domain: str,
     htmlStr += '      <a href="/users/' + \
         nickname + '/' + defaultTimeline + '" title="' + \
         translate['Switch to timeline view'] + '">\n'
-    htmlStr += '        <img src="/users/' + nickname + '/image.png" /></a>\n'
+    htmlStr += '        <img class="profileBackground" ' + \
+        'src="/users/' + nickname + '/image.png" /></a>\n'
     htmlStr += '      <figcaption>\n'
     htmlStr += \
         '        <img loading="lazy" src="' + avatarUrl + '" ' \