How to place the Header Image behind the Header Logo?

Travelify
1

I’m fairly new to WordPress and the Travelify theme so please bear with me.

I want the randomized Header Images to be placed behind the Header Logo, preferably with no white space above, below or to the sides. Instead the Image appears below the Logo. Can that be done?

As a workaround I set the Logo Image to Disable, and included the logo in each of the Header Images. The problem with this approach is that it leaves a very large white space above the image. Can this be removed?

I also tried just using one of those header images with the embedded logo as the Logo Image, but that leaves white space above, below and on each side. And of course it doesn’t change as the randomized Header Images do.

[The first attached screenshot shows the same image (with embedded logo) configured as both the Logo Image and the Header Image, to show the additional white space around the logo image. The second screenshot has the Logo set to Disabled, showing the large white space above the Header Image.]

Thanks for any help offered.

2

Hi there

Hope you are having a good day and thank you for your question
Please always include a link to the project in the question

Thanks!
Colorlib Support Team

3

Thanks for the quick response, but the project wasn’t ready for external viewing at the time. It’s still being set up but you can see it at greenhillstravels.com.

Is the Header Image supposed to be behind the logo instead of below it? If that can’t be done I’ll just delete the header images.

I also have another issue: the Featured Slider was working fine until I installed the NextGEN gallery manager plugin. It then stopped, showing only the first slider image. To confirm that NextGEN is causing the problem I deactivated it, and the slider started working again. I’ll post this also on NextGEN’s forum but any suggestions you have would be appreciated.

Thanks

4

Hey there

Have you added this image manually? i don’t think you need to do this because i have a different solution, just use this css:

header#branding {
background-image: url(https://greenhillstravels.com/wp-content/uploads/2018/12/cropped-Tz1475r-Zebras.jpg);
background-size: contain;
background-repeat: no-repeat;
}

regarding nextgen, usually conflicts with third-party plugins are handled by the plugin authors

5

I want the image to appear behind the page title

e.g. https://cotswoldspabreak.co.uk/enquire-book/

I’ve found this

but wondered whether I can just use settings in the theme itself ( I haven’t found this yet)

Ideas please?

Thanks

Tim

6

Good evening Tim

Please open your own ticket, we are talking about logo section, i will help you too but please open new ticket :slight_smile:

7

Thanks for the response Noda. I used the standard Header Image feature. See attached screenshots.

I want to have several different header images so that each time the page is loaded a randomly selected different logo background will appear. The standard Header Image feature already provides the randomized selection of one of the images, but it appears below the logo instead of behind it. I’m new to WordPress but I’ve done this with Joomla themes before, so I assumed that’s what the Header Image feature was intended for in WordPress as well.

Your suggestion works to place a single static image behind the logo, except that for some reason it leaves a white right margin on every page except the home page. I’d prefer to get the randomized background header images working if possible, but I could live with the static image if we could fix that white margin issue.

Thanks.

8

GOod morning

ah, ok now i understand what is your goal, not sure if this is possible but lets try with css, please change layout back as it was yesterday before and i will try to generate some custom css codes, plus add some more images for the header

9

Please note that I’ve changed the URL of the site to https://gcjourneys.com.

I’ve decided that I don’t need to have the random images behind the logo, so I’m going to stick with the CSS you suggested and have just one static image. I may change it manually from time to time. I fixed the white-space problem by changing the image size to 1018 by 198 - apparently that’s the size of the logo area.

Thanks for your help on this. I’m marking it resolved.

10

I spoke too soon. Did some more testing last night and found that the image is not responsive - it doesn’t resize on different devices. I’m now giving up on the image behind the logo concept. I’ll start a new thread for a related request.

11

Hi there

Ok, since you want to start new ticket i will close this one