Header image smaller for individual page

Hello everybody,

I like the way to add an header image for an individual page but I want the image smaller. I don’t want see the header image using all the page when I load it.

Could you help please !

Thank you :slight_smile: Seb

Hi,

Please post a link to your website, so we can check.

Best Regards,
Csaba

Hello Csaba,

Thank you for the answer.

I don’t have onlined website, for the moment is just localhost.

Doesn’t matter, if you see the “PAGE A” on the demo of Moesia, you can see a picture about an owl. I would like this picture smaller, maybe 300px height. I don’t want see the header image using all the page.

Of cource, I want to keep a fullscreen picture on the welcome page.

Thank you :slight_smile: Seb

Hi,

Please try this Custom CSS and let me know how it works:

.page-template-default .site-header {
    height: 300px !important;
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Best Regards,
Csaba

Hello,

Thank you for the answer.

Unfortunattely it doesn’t seem to work…

Seb :slight_smile:

Hi,

The page template have to be default for it to work, as you said you don’t want to make it smaller on Homepage, please try this instead, it will make it smaller everywhere:

.site-header {
    height: 300px !important;
}

Best Regards,
Csaba

Hello,

It works well :slight_smile: BUT the homepage is also smaller…

Another idea ? Thank you :slight_smile:

Seb

Hi,

Yes, that works for all page, the first for other pages ( with default page template, like Page A in Our Demo ), but try this one, it may work better:

.has-banner {
    max-height: 300px !important;
}

.home .has-banner {
    max-height: 1440px !important;
}

Please let me know how it works.

Best Regards,
Csaba