Header Image on Mobile & Tablet

coltrucker · September 2018

Hi, my website header backgrounds are set. I would like to make it where the image doesn't zoom in on mobile. Right now the image zooms in on mobile, so I only see a small part of the image. How can I make it where the image shows the full height on mobile & tablet? I understand that the complete image won't be viewable, but I'd like it to see the image instead of just a small portion.

I want it to remain parallax on desktop like it is now.

I'm guessing it will be some type of simple CSS code with a @media rule.

Link: https://springgunsandammo.com/training/

Thanks!

Pablo · September 2018

Hi,

If you have set a parallax options, then cover of background-size will not work properly.

All I can suggest is:

a) Disabling parallax effect.

b) Apply this Custom CSS which won't be that good, as with non-parallax.

Paste it into Theme Options > Custom CSS & JS > CSS

@media (max-width:1240px){
  body:not(.template-slider) #Header_wrapper{
    background-size:cover !important;
  }
}

Thanks

Header Image on Mobile & Tablet

Comments