Change header image

Illdy
1

I have set up my website with multiple pages rather than the parallax option. The header on the pages defaults to an image of coffee cup - anyone know how to change it for individual pages?

2

Hello there,

I hope you are doing well today.

The background image is hard coded into the header so there isn’t an option to change it for individual pages in the theme so the only option to do so is to have the theme customized by a third party developer.

Best Regards,
Support

3

So you say you can’t change the header for individual pages.
However I have tried to upload an image on the Blog Headers for additional pages and somehow it does not show the image properly.

What can I do to ensure it shows correct for desktop / ipad and mobile viewing?

Also, I used the following code to remove the header text so just the image shows up but it doens’t seem to work?
I’m getting a bit confused:

/Header text removal/.
#header .bottom-header h1 {
display: none;
}
.home #header .bottom-header h1 {
display: block!Important;
}

The site is:

4

Hi,

You can change that coffee cup image to your own image here, go to Appearance -> Customize -> Blog Options -> Blog Archive Header Image

Let us know,

Thanks,
laranz.

5

Thank you for your response however I shouldn’t have a coffee cup anymore.
I uploaded a black image with letters on it.
But that doesn’t always show up properly.

One of the challenge might be the screen width and the second one is that the blog titles interfer with it.

6

Hi,

How exactly you want to keep the image?

Let us know,

Thanks,
laranz.

7

Well here is a link to the site:

incruitx.com/wp/uglytruth/behind-scenes/

I want the image to show up constantly and it seems that with the following code that works for the tablet and phone. When I use it on my IMAC it seems the screen is too big / wide and then it disappears.

Then secondly, the letters seem to interfere with it and I can’t have that.

So either I hide the title from all the pages but when I do that, it seems the front page title disappears as well and that’s the one I want to keep.

so I’m confused about what to do.

8

Did you get my last response?
I hope you can help so I can go live with the site as this is the only things that’s holding me back right now.

9

Sorry for bugging you again.
If you can’t answer my previous questions,
would you be able to provide me with details how I can change the background to the bottom header so I at least can change it to black so the title shows up and I can make the site live?

I’d really appreciate a response.

10

Hi,

I am sorry for a late response, you meant you want to remove the title from the inner pages alone? Then just use this Custom CSS in Appearance -> Customize -> Additional CSS,

.page-template-default .bottom-header h1 {
    display: none;
}

or copy this file /sections/blog-bottom-header.php from your parent theme and create the same in your child theme, and move the title just below the last div. So that the title displays just below the header, so that it won’t interfere with the background texts.

Let us know,

Thanks,
laranz.

11

Thank you but that deletes the front page title as well and I want to keep that one!

how do I do that?

12

Hi,

Use this to display the title on the front page,

.home .bottom-header h1 {
    display: block !important;
}

Let us know,

Thanks,
laranz.

13

This works thank you.
However I now still have one issue and that is that the header image on the innerpages still is not responsive.
I have uploaded the image but somehow it doens’t cover the full header (top & bottom).
I especially have the issue when the screen size changes.

I’d really appreciate to hear what I can do about this.

14

Hi,

All I see is a black stripe background in the header, http://incruitx.com/wp/uglytruth/insiderinfo/ I see the image very well in my iMac http://take.ms/4iOfH

Let us know,

Thanks,
laranz.