Header Image Issue

Hello,

So the header image certainly isn’t behaving the way it should be; unfortunately I don’t think the fix is going to be exactly what you’re looking for in your particular scenario.

If you want, you can add the following code into Additional CSS in your WordPress Customizer (I’ll also add it in a future update at some point):

.site-header {
	background: no-repeat center;
	background-size: cover!important;
	-moz-background-size: cover!important;
	-webkit-background-size: cover!important;
}

What this is going to do is try and center the image across screen sizes (similar to what’s happening with the header image in the Twenty Seventeen theme). However, this will not make the entire image visible at every possible screen size. The reason is that the width of the header can constantly be changed (from, say around 400 pixels at mobile to 1920 on desktop), but the height of the header never changes. So while the 1920 x 265 is indeed the recommendation for a header image with Gillian, there’s no real way to lock the entire header area to this aspect ratio, and therefore parts of the image will always be cut off. It’ll just be parts around all edges, rather than at the top and right like you’re currently experiencing.

What you’re trying to do with re-sizing your banner image so that the full image is always visible unfortunately just isn’t compatible with the function of the header image and the header space in Gillian.

As for removing the search bar, you can do so by adding the following code (also in Additional CSS in the Customizer):

.header-search .search-field, .header-search .search-submit {
	display: none;
}

.header-bar {
	margin: 0 auto 110px;
}

Very sorry about the header image issue!

Hi Alexa,

Thank you for replay. The top image has no changes with the code. I have updated the image itself to make all elements fits into the top bar. But for changing of the browser size or for mobile version the image still not presented right.

For the search field it works fine.

Thank you for help.

I hope that the new version of Gillian theme will be fixed for this issue.

Regards,

Sergey

Hi Alexa,

Just noticed that you got a new Version: 1.0.8 of Gillian Theme.

What changes has this version? I can’t see it the Dev log.

Was the issue with the top image fixed and is it resizable and mobile friendly now?

I would like to upgrade the website but not sure if my issue will gone.

Regards,
Sergey

Hi Sergey,

I realized that I somehow missed your second response here! Of course, it’s been quite awhile now, but I see that the site you linked is currently still using Gillian, so I wanted to reply now that I’ve noticed!

As I explained previously, the functionality that you’re looking for with the header image is not compatible by default with Gillian because the header image in Gillian is a background image, intended to be placed behind the text that is the title/sub-title of your site. In this case, you’ve removed the text title (and header search bar), and you’d like to use a stand-alone banner image in this area instead.

Of course, this is doable, but it requires adjusting the code further because you want to make a more substantial change to how Gillian is intended to function. The best way to make changes like this to a theme is to use a child theme, so your changes won’t be overwritten when updating the theme.

Once you follow the instructions above and have created and activated your child theme, you’ll want to copy Gillian’s header.php file to your child theme folder. This is where we’re going to make the important change in setting up your banner image:

Delete the code from lines 46-66 (starting with <div class="header-bar"> and ending with </div> <!-- .header-bar -->)

Replace those lines with the following:

<img class="header-image" alt="Header image for my site" src="YOUR IMG URL GOES HERE">

Of course, with the correct URL of your image in place of YOUR IMG URL GOES HERE.

Now you’ll want to go back to the style.css you created in your child theme and add the following lines of code:

.top-navigation {
	margin-bottom: 0;
}

.bottom-navigation {
	margin-top: -5px;
}

This will fix up the margins around the top and bottom of your image.

You should now have a stand-alone image that will re-size with your screen, and of course show the entire image on mobile.

You can also delete the code you added before in Additional CSS, as it is no longer relevant after these changes.

Very sorry once again for the confusion and the incredibly delayed response. I’m not sure how I lost track of this!

• This reply was modified 6 years, 7 months ago by Alexa.