diff --git a/components/StarrySky.js b/components/StarrySky.js
index 089a95b9..4cb5c8a5 100644
--- a/components/StarrySky.js
+++ b/components/StarrySky.js
@@ -7,7 +7,7 @@ export const StarrySky = () => {
   }, [])
   return (
     <div className="relative">
-      <canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
     </div>
   )
 }
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index 87e83e10..658e2e77 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -83,23 +83,14 @@ const Header = props => {
   }, throttleMs))
 
   return (
-        <header
-            id="header"
-            className="w-full h-screen bg-black text-white relative"
-        >
-            <div className={`w-full h-full ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'fixed' : ''}`}>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
+        <header id="header" style={{ zIndex: 1 }} className="w-full h-screen relative" >
 
-            <div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
-                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={`w-full h-screen bg-cover ${CONFIG_HEXO.HOME_NAV_BACKGROUND_IMG_FIXED ? 'bg-fixed' : ''}`}/>
+
+            <div className="text-white absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
+                <div className='mt-2 h-12 items-center text-center shadow-text text-lg'>
                     <span id='typed' />
                 </div>
 
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index 454e5249..69299b3e 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -86,18 +86,9 @@ const Header = props => {
 
   return (
         <header
-            id="header"
-            className="md:bg-fixed w-full h-screen bg-black text-white relative"
+            id="header" style={{ zIndex: 1 }}
+            className=" w-full h-screen bg-black text-white relative"
         >
-            <div className='w-full h-full absolute'>
-                {/* <Image src={siteInfo.pageCover} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-70'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' /> */}
-                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
-            </div>
 
             <div className="absolute flex flex-col h-full items-center justify-center w-full ">
                 <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
@@ -110,6 +101,9 @@ const Header = props => {
                 </div>
             </div>
 
+            <div id='header-cover' style={{ backgroundImage: `url('${siteInfo.pageCover}')` }}
+                className={'w-full h-screen bg-cover '}/>
+
         </header>
   )
 }