[Resolved] fixed 'page header' height and centred background image

[Jim]

Hi, I’m trying to create page headers that maintain a fixed height (250px) irrespective of the page width. The page header width is currently set to 100% of the browser width. At present the image height scales in line with the reducing browser’s width. The image would be centered horizontally so that the left and right edges are hidden depending on the page size but the height remains the same.

You can see the issue here

Thanks in advance

Jim

[David]

Hi Jim,

I would recommend you add the image as a background to the page header and then set the Top / Bottom padding to 125px.

[Jim]

Hi David,
Firstly, thank you for your help. I’ve tried what you suggest but without success. I have attached 2 screenshots so you can see my settings.

http://www.jmg-associates.com/wp-content/uploads/screen1-2.jpg
http://www.jmg-associates.com/wp-content/uploads/screen2-2.jpg

http://www.jmg-associates.com/the-team/mission-values/

[David]

Hi Jim,

just add the Image to the background. Do not resize.
Then on the content pane you need to add some content. As you don’t want any just add an empty span tag like so: <span></span>
Then set the Top Bottom padding to 125px.

[Jim]

Wow – as easy as that!

Thank you David. I’ve been fiddling around with various CSS options for ages.
As it turns out I only required a top/bottom padding of 55px as the ‘inside-page-header’ class already has a height of 80px + 60px. Looks like it is coming from ‘layout’ > ‘container’ > ‘content padding’?

Either way I’m delighted.

Thanks again.

[Jim]

Done!

[David]

Glad to hear you got it resolved. Yes the Add Padding toggle imposes the site content padding. You don’t have to activate this, the Top and Bottom Padding work with or without it

[Author]

Posts