[Support request] Full 1440 x 900 Header Background

Home Forums Support [Support request] Full 1440 x 900 Header Background

Home Forums Support Full 1440 x 900 Header Background

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #922728
    Jonathan

    Hello all! I am new to Generate Press and I am struggling to find the setting for allowing the background of my header to vertically stretch the full 900 pixels. It seems to cut off at the quarter mark. I am possibly misguided on what size to make this image in the first place.

    Thank you in advance for your help!

    #922729
    David
    Staff
    Customer Support

    Hi there,

    could you link is to your site so i can take a look?
    You can edit your original topic and use the Site URL field to share the link privately.

    #922731
    Jonathan

    My apologies, David. The site is currently being developed locally. Would screenshots be helpful?

    #922743
    David
    Staff
    Customer Support

    Is the Background > Header in the Customizer or a Header Element?

    A screenshot would be helpful. To add them here the file needs to be hosted on a share drive and you link us to the URL

    #922756
    Jonathan
    #922768
    David
    Staff
    Customer Support

    Thats gonna be an awfully tall header…. would a Header Element be better ?

    https://docs.generatepress.com/article/header-element-overview/

    Example of merged header can be seen here:

    https://docs.generatepress.com/article/page-hero-examples/#example-2

    #922811
    Jonathan

    This looks great, David! I’ll play around with this. Any recommendations on what the background image’s height should be for something like this?

    #922834
    David
    Staff
    Customer Support

    So the height of the header element is defined by a. any content you add inside it and b. the top and bottom padding.

    Let’s assume you don’t have any content, you will need to add a HTML comment in the content for the element to display eg.

    <!-- i am HTML comment you can write whatever here -->

    So % top and bottom padding is key to keeping it responsive.
    Simply divide your original height of the image by its width to get a % aspect ratio. e.g 900 / 1440 = 62.5%

    Split that between the top and bottom padding roughly 31% each.

    If the element has content inside it like a title then you will need to reduce that % down, will take a little tweaking to get it close.

    #922890
    Jonathan

    Okay, great! I think I got it pretty close to where I’d like it

    https://drive.google.com/file/d/16OJjJ6kby1dAT-lVhrxwAnAC3b2RPc-G/view?usp=sharing

    My only question is about lining up the logo on the left with the menu on the right. I changed the menu height on the right but I figured I’d inquire about possibly a more plausible solution in terms of general syntax.

    Thanks so much for all the help so far. It is much appreciated.

    #922918
    David
    Staff
    Customer Support

    If you’re using the navigation as header option then the logo will be part of the nav and vertically aligned with it, its height will then be set by the Menu Item height.

    The navigation set to float right, which is probably the way you have it, then yes adjusting the menu item height to match the logo is the simplest way of aligning the two.

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