Standard site template - how to change hight of image in hero section?

reart · August 2019

Hello,

please help me to change the hight of hero image at top of the site (with paralax effect). I can not find option in site (WP) or Muffin Options... Only changes in CSS or code?

Site under construction:

http://expert.reart2.atthouse.pl/oferta/

Thank you for help.

Artur

Bryan · August 2019

Hello,

it is the header background image.

You will find it in theme options>header&subheader>header

thanks

reart · August 2019

Hello again,

thank you for help but I do not mean size (hight) od image in header backgrounf but hight of the area / section behind which the image is. As shown on PrtScr:

https://prnt.sc/owns2e

How to change on all pages template or in every single page this hight (red arrow)?

thanks - Artur

Bryan · August 2019

Hello,

the size depends on the height of the Subheader.

Please go to theme options>header&subheader>header and change the padding values for the subheader. This will extend the header area and show more of the background image.

thanks

reart · August 2019

Super - thank you very much - I did not noticed this padding ;-)

reart · August 2019

Hello again,

but I have one more question - is it possible to change this padding individually for each page?
How to make diffirent for each type of page

And also for post/portfolio? etc

thank you

Pablo · August 2019

Unfortunately not.

Subheader height/padding are set in the theme options, so that means it's global value.

You would have to create special CSS code for every page which will have different size.

Thanks

reart · August 2019

I see - It is a pity... can you make me advice how to do it for single page in CSS? Where to write a CSS code?

thank you very much for help!

Pablo · August 2019

All of the CSS code should be pasted in the Theme Options > Custom CSS & JS > CSS

So, first of all, you have to catch the id of a page, which is included in the <body> tag.

http://prntscr.com/ozlyxe

So, the beginning will look like:

body.page-id-2{/* CSS RULES */}

But, it's only selecting the page, you have to catch the subheader now, so, find it in the source code.

http://prntscr.com/ozlzm6

So, it will look like this

body.page-id-2 #Subheader{
height:300px;
/* and more css what you want*/
}

That's all.

Thanks

reart · August 2019

SUPER - thank you very much for complete procedure and "know how" - thats it !!! ;-)

Standard site template - how to change hight of image in hero section?

Comments