diff --git a/assets/images/banner/.directory b/assets/images/banner/.directory
new file mode 100644
index 00000000..9027c272
--- /dev/null
+++ b/assets/images/banner/.directory
@@ -0,0 +1,9 @@
+[Dolphin]
+HeaderColumnWidths=733,143,94,163
+PreviewsShown=false
+SortOrder=1
+SortRole=modificationtime
+Timestamp=2022,5,6,15,38,7.939
+Version=4
+ViewMode=1
+VisibleRoles=Details_text,Details_size,Details_modificationtime,Details_type,Details_permissions,CustomizedDetails
diff --git a/assets/images/banner/home.jpg b/assets/images/banner/home.jpg
deleted file mode 100644
index 6aac5d62..00000000
Binary files a/assets/images/banner/home.jpg and /dev/null differ
diff --git a/assets/images/banner/home.webp b/assets/images/banner/home.webp
new file mode 100644
index 00000000..d9cb9d87
Binary files /dev/null and b/assets/images/banner/home.webp differ
diff --git a/themes/buha/assets/css/classes.css b/themes/buha/assets/css/classes.css
index 79b76adf..87ef5577 100644
--- a/themes/buha/assets/css/classes.css
+++ b/themes/buha/assets/css/classes.css
@@ -61,3 +61,4 @@
 .no_underline {
     text-decoration: none;
 }
+
diff --git a/themes/buha/assets/css/header.css b/themes/buha/assets/css/header.css
index 1bc0fea0..edb5e59c 100644
--- a/themes/buha/assets/css/header.css
+++ b/themes/buha/assets/css/header.css
@@ -25,3 +25,10 @@ summary {
     list-style: none;
     text-align: right;
 }
+
+.sticky {
+    position: fixed;
+    width: 100%;
+    max-width: 1024px;
+    background-color: var(--background-alt);
+}
diff --git a/themes/buha/layouts/_default/baseof.html b/themes/buha/layouts/_default/baseof.html
index c9cf8398..835237bf 100644
--- a/themes/buha/layouts/_default/baseof.html
+++ b/themes/buha/layouts/_default/baseof.html
@@ -4,7 +4,7 @@
     {{ block "css" . -}}{{- end }}
     <body>
         <div id="container">
-            <header>
+            <header class="sticky">
                 {{ partial "snippets/header" . }}
             </header>
                 {{ partial "snippets/banner" . -}}
diff --git a/themes/buha/layouts/partials/snippets/banner.html b/themes/buha/layouts/partials/snippets/banner.html
index 885b4e93..11c2ed93 100644
--- a/themes/buha/layouts/partials/snippets/banner.html
+++ b/themes/buha/layouts/partials/snippets/banner.html
@@ -20,10 +20,16 @@
 {{ end }}
     
 {{ if resources.GetMatch $banner }}
-    <div style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({{- $img.Permalink -}}); background-size: cover; min-height: 33vh; display: flex; justify-content: center; align-items: center;"><h1 style="font-size: 350%;  color: white;">{{ $title }}</h1></div>
+    <div style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({{- $img.Permalink -}}); min-height: 33vh; display: flex; justify-content: center; align-items: center; 	background-position: bottom center; 
+	background-repeat: no-repeat; 
+	background-size:cover; 
+	background-attachment:fixed; padding-top: 5rem;"><h1 style="font-size: 350%;  color: white;">{{ $title }}</h1></div>
 {{ else if .Resources.Match "banner*" }}
         {{ $img = (.Resources.GetMatch "banner*") }}
-    <div style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({{- $img.Permalink -}}); background-size: cover; min-height: 33vh; display: flex; justify-content: center; align-items: center;"><h1 style="font-size: 350%;  color: white;">{{ $title }}</h1></div>
+    <div style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({{- $img.Permalink -}}); min-height: 33vh; display: flex; justify-content: center; align-items: center;	background-position: bottom center; 
+	background-repeat: no-repeat; 
+	background-size:cover; 
+	background-attachment:fixed; padding-top: 5rem;"><h1 style="font-size: 350%;  color: white;">{{ $title }}</h1></div>
 {{ else }}
-    <h1 style="margin-top: 1rem; margin-left: 2rem; margin-bottom: 0; color: white;">{{ $title }}</h1>
+    <h1 style="margin-left: 2rem; margin-bottom: 0; color: white; padding-top: 5rem;">{{ $title }}</h1>
 {{ end }}
