Hello,

The CSS given below will help you to remove the overlay effect from the header image. You can add CSS following the path Admin panel > Appearance > Customize > Additional CSS

#page-site-header .overlay{	 
    background-color: transparent;
}

If the issue still persists then please send us the screenshot with the specific marking so that we can provide you with the precise fix.

Hope this helps.

If you have further queries, let us know.

Thank you.

Hello,

Please send us the screenshot from light shot https://app.prntscr.com/en/download.html

The image you sent is not responding.

Also, send the screenshot of the issue and mention that what exactly do you want in your header section.

Regards.

Hello,

Please refer to this screenshot, below screen record is what this link redirects us to.

https://prnt.sc/qzz374

Also, the image you have used as header image is blur itself so once verify by using another image as well.

Further, If the issue still persists using other images too then use ‘regenerate thumbnail’ plugin to solve the issue related to the overlay of the image.

Regards

Hello,

To resolve the issue you are facing in the iPhone, use additional CSS following the path Admin Panel > Appearance > Customize > Additional CSS

@media screen and (max-width: 414px){
 #page-site-header{
   background-attachment: inherit;
 }
}

Hope this helps.

If you have queries further, let us know.

Thank you.

Hello,

To display the header image, use CSS following the path Admin Panel > Appearance > Customize > Additional CSS

@media screen and (max-width: 414px)
#page-site-header {
    width: 113%;
}

#page-site-header {
    height: 50vh;
}

Also, the size of the screen can display this much of the image.

Hope this helps.

Regards.