Header image resize not working

The header image is responsive. If you resize your browser window on the demo you will see what I mean:

https://demos.bavotasan.com/tonic/

You need to make sure that both of those widgetized areas are actually being displayed. The Home Page Top Area has a checkbox under the Theme Options => Layout panel. The second sidebar will only appear if you have selected a layout with two sidebars.

Hi,

the problem is that header image is responsive on every page besides the front one. Even on your demo site the box with “jumbo headline” is flexible but not the image behind it.

On static pages it works very well like here:
https://demos.bavotasan.com/tonic/about/page-image-alignment/

And as for the widgetized area – is it possible to display “image with text” widgets on static pages below the page content?

It responds the same way on every page. You can just see less of it on the inner pages. The background image uses the CSS3 style background-size: cover which will fit the image into the header and shrink/grow accordingly as the the browser window resizes.

There are no widgetized areas below the page content in Tonic. Though Tonic Pro does have an extended widgetized footer.

Thank you for the reply!

It’s a little bit confusing or I don’t know how to explain it.
Please take a look:
https://deviceponsive.com/?url=http%3A%2F%2Fdemos.bavotasan.com%2Ftonic%2F#

On the first device with full reseolution you can see the whole image. On the smaller ones you can see only a small part of it. It’s not responsive,isn’t it?

Hello, I have installed the Tonic theme, and think it looks great, but I have one issue.

I am trying to change the header image, but only seem to have the option to use no image or the default image. I can’t find any way of uploading my own image. If I install another theme I am able to do this using the default WP theme customisation.

Hope you can help!

@gombroo
The image is responsive, the problem is that if it would shrink down so that you can see all of it, it would not be tall enough to cover the area it needs to. Hence why it stays so large even on a smaller device.

@hedgehogsue
You can’t upload a new header image under the Theme Options customizer. This is a WordPress core function and you are required to go to the Header admin page (under the Appearance menu) to upload a new image.

I want to make the header image the same size on the home page as it is on the secondary pages – how do I do that? The size seems to be hardcoded into index.php but I’m not sure where.

I’m looking for a similar answer as Latristesse… I have a header on my front page that is a collage of pictures, on interior pages you only see the tops of people’s heads….

I am looking for a similar answer as Meghoullhan. The header is not the same on the interior pages. Can you please change this? This is very very frustrating. I have a headshot as well on the front page. Do I need to upgrade to pro in order for the header image to be the same on all pages? Thanks for your immediate help!!!

I have been checking in on this answer as well. I love this theme but I am having the same issue with the header image. I did upgrade to the tonic pro hoping that would resolve the issue but it didnt. The header is not the same on the interior pages when viewed on desktop. But ironically, when viewable on mobile, it is the homepage that is not responsive and the interior pages work.

I see this similar thread/topic repeated. what are we all doing wrong?? Please HELP!!!!

This will keep the header image full height:

#header-wrap {
   height: 550px;
}

Can you tell me exactly where I place this?
#header-wrap {
height: 550px;
}
I am having the same problem. This is my first attempt at a website. I found where it looks like I should do this under Editor>Edit Themes but I see more than 1 location that contains header-wrap.

thanks

Found it. I’m ok for now.

I tried creating a page but it’s not displaying on the website. Can you tell me a way to show my page that I created without showing Responsive and Twitter tools you put in. Thanks for your help.

ok, I”m not as tech-savvy as the rest of you fine people…I’d like to have the full size header image but only get the cropped image…please help…in plain english! thank you!