fix: Solved the problem that the image of post shows unexpectedly

layout/_partials/header/header.pug

@@ -5,7 +5,6 @@ include ../../_mixins/menu-item.pug
 nav.header-nav
   div.header-nav-inner
     div.header-nav-btn(class=`${fa_prefix} fa-bars`)
-
     div.header-nav-menu
       +menuItem(theme.menu)
 
@@ -17,8 +16,9 @@ nav.header-nav
           span!= __("nav.search")
 
 div.header-info(style=`${
-    theme.header.bg_image.enable &&
-      page.top_image ? 'background: url(' + page.top_image + ') no-repeat center/cover;' : ''
-  }`)
-  div.header-info-title= config.title
-  div.header-info-subtitle= config.subtitle
+  theme.header.bg_image.enable &&
+    page.top_image ? 'background: url(' + page.top_image + ') no-repeat center/cover;' : ''
+}`)
+  div.header-info-inner
+    div.header-info-title= config.title
+    div.header-info-subtitle= config.subtitle

source/css/_common/components/footer/index.styl

@@ -21,8 +21,7 @@
 
     if (hexo-config('footer.bg_image.enable') && hexo-config('footer.bg_image.url')) {
       z-index: $z-index-2;
-      background: url(hexo-config('footer.bg_image.url')) no-repeat center center;
-      background-size: cover;
+      background: url(hexo-config('footer.bg_image.url')) no-repeat center/cover;
     }
 
     if (hexo-config('footer.mask.enable')) {

source/css/_common/components/header/index.styl

 .header {
   &-inner {
-    position: relative;
     width: 100%;
     font-size: $font-size-header;
-    background-color: $header-nav-bg-color;
 
     if (hexo-config('header.height') && match('%', hexo-config('header.height'))) {
       height: unit(convert(hexo-config('header.height')), 'vh');
     } else {
       height: convert(hexo-config('header.height') || '80vh');
     }
-
-    if (hexo-config('header.bg_image.enable') && hexo-config('header.bg_image.url')) {
-      background: url(hexo-config('header.bg_image.url')) no-repeat center center;
-      background-size: cover;
-    }
-
-    if (hexo-config('header.mask.enable')) {
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: $z-index0;
-        width: 100%;
-        height: 100%;
-        background-color: alpha(#000, hexo-config('header.mask.opacity'));
-      }
-    }
   }
 
   if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height'))) {
@@ -161,14 +140,39 @@
   }
 
   &-info {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: $z-index0;
-    padding: 0 .5rem;
+    position: relative;
     width: 100%;
-    text-align: center;
-    transform: translateY(-50%);
+    height: 100%;
+    background-color: $header-bg-color;
+
+    if (hexo-config('header.bg_image.enable') && hexo-config('header.bg_image.url')) {
+      background: url(hexo-config('header.bg_image.url')) no-repeat center / cover;
+    }
+
+    if (hexo-config('header.mask.enable')) {
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: $z-index0;
+        width: 100%;
+        height: 100%;
+        background-color: alpha(#000, hexo-config('header.mask.opacity'));
+      }
+    }
+
+    &-inner {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      z-index: $z-index0;
+      padding: 0 .5rem;
+      width: 100%;
+      text-align: center;
+      transform: translateY(-50%);
+    }
 
     &-title {
       margin-bottom: .5rem;

source/css/_variables/index.styl

@@ -116,6 +116,7 @@ $img-border-color              = #dadefb
 // Module color
 // -------------------------------------------
 // Header
+$header-bg-color                   = alpha(#2d2e30, .7)
 $header-nav-bg-color               = alpha(#2d2e30, .7)
 $header-nav-link-color             = $white-light
 $header-nav-link-hover-color       = $blue-light