Archived topic
Need help resizing background header image for mobile views
5 replies · Started by paulscottanderson on April 11, 2017
Hello,
I wanted to resize the main header area to show a larger (vertical) background header image at the top, instead of using the page header. I can do that by adjusting the padding for desktop view and it looks good, but when I check it in tablet or phone mobile views, it shows a lot of white space between the bottom of the header image and the top of the content area. I had wanted to still show the header image in mobile views instead of using the mobile header option with a smaller header logo. Is there any way to do this? Thanks!
Hi there,
Can you provide a link to your page? Thanks!
Background images are not responsive by nature but we might be able to try alternative methods.
Ok, this is how it looks right now (front end of blog). Great on desktop, but in mobile view, a lot of white space between header background image and navigation menu. I had thought before that I could just do a regular header image, oh well. Thanks!
Could you try adding the current header background image in Customizer > Site Identity > Logo?
Let me know if that works better.
I'm still playing with it but that seems to work, using the full-size header image as the header logo, setting all the padding to 0 and disabling the mobile header. It scales properly now on my Mac, iPad and iPhone, which I don't think the background image would do as you said. I also kept the header background black to match, for any wider screen widths. Thanks!
Glad I could help. Let me know if you need more info!
