Archived topic
fixed 'page header' height and centred background image
6 replies · Started by Jim on June 14, 2018
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
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.
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
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.
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.
Done!
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
