WordPress: Different Header Images for Mobile + Desktop

Question

I have a WordPress site where I've used a header image that works well on desktop: http://fortyfourth.co.uk

But, on mobile, the image doesn't work well at all.

Is it possible to use a custom header image for mobile only? I'm very new to WordPress (and any element of coding for that matter) so, if this is at all possible, it'd be great if you could tell me where and how I need to add the custom code.

Thanks, Ryan

Answer 1

Header image looks ok in the mobile view of your website, but if you want to use another background image in your page, use this css rules:

@media screen and ( max-width: 425px ){ 
  .page-id-155 .ewf-header-image-option{
      background-image: url("http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png") !important;
      max-height: 150px !important;
      background-position: 49% 0px !important;
  }
}

Instead of this http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png use your new image full url.

In this line we defined, when your image will changed: @media screen and ( max-width: 425px ){ . max-width: 425px mean that for all screens which width are smaller then 425px. You can change it with width you want.

max-height: 150px !important; mean, that the section of image height will be not longer then 150px, You can change 150px with the height you want.

About background-position you can learn here .

Code goes to Customize -> Additional Css .

Answer 2

I tried this, exactly as written and several variations, using CSS, but to no avail.

I ended up using a PHP mod found at https://wordpress.org/support/topic/setting-a-different-header-image-for-mobile/

I did end up having to re-size my alternate image and that caused the rest of the images on the page to be zoomed. But I think I have a solution for that.

I hope this helps.