How to either remove or change Header Image Background for Mobile Viewing

TayloeMarketing · January 2018

Hello,

I am curious if there is either a CSS fix or a current option in theme settings to have the header background image either minimized or removed (like the option you have with the revolution slider) when viewed on a mobile device. The header image looks great when viewed on desktop or laptop, but on a mobile device, that image is just bam, real big and doesn't look as good.

Here is the website discussing: https://simplytreesfl.com

I'm using the 'Modern" header design.

Bradley

Bryan · January 2018

Hi Bradley,
have you tried changing the background-size proprty to : cover?
thanks

TayloeMarketing · January 2018

yes, I've tried cover, contain, auto, and contain>1920

All four options still show the background image on mobile.

Bryan · January 2018

So you want to hide the background image completly on mobile devices?

TayloeMarketing · January 2018

Yes, or minimize it as much as possible (make it smaller, or hide).

Bryan · January 2018

You get can rid of the image by going to theme options>responsive>header and switching the header style for mobile to 'minimalist'
thanks

TayloeMarketing · January 2018

Good Morning,

I tried that theme option, with and without 'sticky' on as well. Still not working. Is there any CSS code that would do the trick?

I really want to be able to use the modern header design has it is a great look, but hide the header background image on mobile.

Thanks!

Bryan · January 2018

Sorry I missunderstood, please use this css

@media (max-width:767px){
body:not(.template-slider) #Header_wrapper {
	background:none !important;
}
#Header {
	min-height: 50px !important;
}
#Subheader {
	padding:0 !important;
}
}

TayloeMarketing · January 2018

That worked!

Thank you!

How to either remove or change Header Image Background for Mobile Viewing

Comments