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

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

Home Forums Support fixed 'page header' height and centred background image

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #599856
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #599877
    David
    Staff
    Customer Support

    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.

    #599912
    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/

    #599969
    David
    Staff
    Customer Support

    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.

    #600076
    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.

    #600077
    Jim

    Done!

    #600087
    David
    Staff
    Customer Support

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.