Picture instead of color header on pages

Is there a way you can have a picture as header, in other pages than just the home page ? I have tried a few plugins but they dont seem to work… :slight_smile:

Hi Foxyjonesdk,

you can customize the header on your pages by using the following code:

body:not(.home) .ignis-hero-area {
background-image: url("yoursite.com/url/img.png"); 
}

/Christian.

That`s great Chris I been trying that without success because i don’t know what file need to edit (is it header.php maybe?) and also i don’t know in which part of the body need to add the code!

I figured out that you need to modify the custom css panel to see the changes!
Thanks a lot from Argentina :smiley:

That’s my site:
https://blog.lisovich.photography

Right…
What if I want different images on different pages?
Cause that code copies the same image on all pages.

Thanks a bunch!

Hello there,

You can use page class name identified by its unique ID number. For example:

    .page-id-2 .ignis-hero-area {
      background-image: url("yoursite.com/url/img.png") !important; 
    } 

You can get the ID number when editing your page; in the web browser’s address bar, you’ll see a URL that reads something like: yoursite.com/wp-admin/post.php?post=2&action=edit

Regards,
Kharis

Oh… That worked perfectly. Thank you!

Hi, I need some helps in this header, please anyone can help me?

1- I wish disable mouse over… if you look my site, http://alanspring.com/portfolio/ when mouse over hide picture and show solid color. I wish fix only image.

2- I wish change the size of this header.

Thanks a lot!

Hello there,

1

To remove the hover effect, you can use this simple CSS code:

    .ignis-hero-area:after {
      display: none;
    } 

To apply it to your site, add it to your site’s Additional CSS (Appearance > Customize > Additional CSS).

2

To decrease the height, you can use this CSS code:

    .home .header-text, 
    .post-template-post_nosidebar_featured .header-text, 
    .jetpack-portfolio-template-post_nosidebar_featured .header-text {
      padding-top: 100px;
      padding-bottom: 100px;
    } 

The default values are 200px;

Regards,
Kharis

Kharis, thank you.
When I put “1” is ok, but when I add “2” the “2” works and “1” stop work.
Below how I put:

.home .header-text,
.post-template-post_nosidebar_featured .header-text,
.jetpack-portfolio-template-post_nosidebar_featured .header-text {
padding-top: 100px;
padding-bottom: 100px;
}

.ignis-hero-area:after {
display: none;
}

When I click in Publish show erros when I past the “2” in Additional CSS

If you help me again I will appreciate.

Not really sure of which needs to fix. I checked the code with CSS validation tool and the result shows no error.

Regards,
Kharis

Hmm… but this:

.ignis-hero-area:after {
display: none;
}

doesn’t work if I use the code to change the size of header

.home .header-text,
.post-template-post_nosidebar_featured .header-text,
.jetpack-portfolio-template-post_nosidebar_featured .header-text {
padding-top: 100px;
padding-bottom: 100px;
}

Please try this code:

    .ignis-hero-area::after {
      display: none !important;
    } 

Regards,
Kharis

This isn’t working for me. This is what I have pasted in the additional CSS coding.

.page-id-1 .ignis-hero-area { background-image: url haleykosik.com/wp-content/uploads/2018/03/IMG_9431.jpg !important; }

What am I doing wrong? This is my site for you to look over: haleykosik.com

Hello there,

Please check the page ID of your page, is that 1? Please share a link to that page, so I can get its ID number and correct the code.

Regards,
Kharis

Couldn’t find the page number while on the editing screen. 1 was just a guess because my only other page is my static page.

https://haleykosik.com/resume/

Hello there,

Viewing the source code of that page, its ID is 12. To help you easier find the page ID, you can also use this plugin.

Regards,
Kharis

This worked, thank you. Another quick question, the header text on this page is now in the middle of my face. How can I move the text. I did it with my static page and want to leave that where it is.

Hello there,

Try adding this extra custom CSS code:

    .header-text .entry-title {
      padding-top: 80px;
    } 

Regards,
Kharis

How about to the bottom left-hand corner?