Setting a different header image for mobile?

Fixed with this in funtions.php

function custom_header_image_tag( $html, $header, $attr ) {
    if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') || strstr($_SERVER['HTTP_USER_AGENT'],'webOS') || strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad') || strstr($_SERVER['HTTP_USER_AGENT'],'Windows Phone') || wp_is_mobile()){
        $html = "insert custom header image tag here";
    }
    return $html;
}
add_filter( 'get_header_image_tag', 'custom_header_image_tag', 10, 3);

Thanks for sharing the solution.

@anevins I have just been trying to do this, and suddenly my entire site has gone blank and can’t be accessed! What can I do? https://epi.26f.myftpupload.com/

Did you solve this?

Go back to the twenty-seventeen theme to see whether it is something you did. If so, you need to work on the Child Theme all over again.

Is it possible to somehow just put this into the “additional css” in the customize area? I tried that but I’m getting 19 errors (not sure how to fix them). My site is judynightmusic.com, and I’d like the header photo different in mobile. Also my header should be shifted lower for the non-home pages. (that’s another question)

I’ve added the function to my function.php… The site is still operational, I just can’t figure out where / how to add the alternate image for mobile users. I’m using the No Nonsense theme if that matters. https://www.gamufon.org

Finally! With a little effort, this PHP solution worked for me, to a point.

Thanks, @afs_website.

https://RVInspector.pro/

This switches the image. That’s good. But I still had an issue. My alternate image has text on it that goes very nearly edge to edge. That means that I needed the alternate image to be full width. Unfortunately, this fix zooms to height.

I realized that the image was also using the space behind the menu, at the bottom of the screen. So, being a Photoshop guru, I added height to the image, by adding a couple of hundred pixels to the bottom of the image (clone tool). Now, the full alternate image displays.

But now, there is another problem. All of the featured images on the rest of the home page are zoomed in, but only in portrait mode and only on tablets. They look great on full-size (laptop) displays and on my iPhone. But when I use the menu to go directly to that page, the image is correct. For example, the “About” section on the home page is actually being drawn from the “About” page. So when I scroll down the home page, to the “About” section, the image is zoomed. But when I visit the “About” page, the image is correct.

I think this has to do with the fact that the alternate image has caused the width of the page to shrink to that width, but the images from those other pages remain full-size.

Any ideas?…