Support » Theme: Longevity » Display Banner Images under the logo area

  • Resolved pocapratica


    Is it possible to use the space of the header area? And display the banner images under it?

    I was wondering do to this, to decrease the size of the header and the banner areas.

    Thanks for any help.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Theme Author Shaped Pixels


    You mean behind the logo and menu area at the top?

    I mean between the social and search bar and the begin of the content. Just go up the curve area, under the logo.

    I guess this is possible with some css changes.

    Theme Author Shaped Pixels


    There is one way to move the banner area up and under the top header so that the logo and menu sit on top of it, but the big problem is that it falls apart with the responsive aspects of different screen sizes. To correct that, it would take some very creative custom CSS which could get a bit messy and complicated. Long story short, I would not recommend this method unless you were really comfortable with CSS code.

    Now, if you just want to have a background image in your header area, you can do some custom CSS to add a background image to the header container which would be something like this:

    .site-header {
    background-color: transparent;
    background-image: url('link to image');

    The transparent background colour will remove the default colour and make it transparent. Then the background image with the link to image (being the full URL path to your uploaded image) will show in the background.

    There’s more image attributes you can add, but it depends on what you want it to look like.

    Thanks for your help. I didn’t think about the responsive part of the theme.

    But what I have in mind was to go up the curve part, and not put an image under the logo. Doing this, it could not be possible to use the widgets in that area, like its possible now.

    Thanks. I decided to decrease the banner height and keep it where it is.

    Theme Author Shaped Pixels


    No worries…I’m sure you will end up with a result that will still look great.


    By the way, How can I decrease that space below the main menu?

    I can’t find a way through css.

    Here has an screenshot

    Theme Author Shaped Pixels


    That is controlled from this:

    #masthead.header-centered {
        padding: 1.125% 0 1%;

    1.125% on the top, 0 on the left and right, and then 1% on the bottom (in that order. You can use pixels if you are more comfortable with that.

    Thanks. You’re so kind for helping us.

    Another problem:

    Why when I resize/restore the browser window, the banner image height leaves an empty space before the curves? Seems it does not dynamically resizes the image proportionally.

    Theme Author Shaped Pixels


    You are very welcome.

    Regarding your latest issue…that is odd…hard to say what is happening without actually seeing the site live, but if that happens when you manually drag the window to resize it, then something is preventing it from having it’s responsiveness attribute. Does this happen to you on the live demo site?


    • This reply was modified 1 year, 3 months ago by  Shaped Pixels.

    Perhaps it happens because I want a short banner area. And I’m using an 1920 x 564 px image in the banner.

    And I’m using a plugin NextGen Slideshow at the banner area. In that plugin, I defined the image height at 400 px, to the curve image to be over the image.

    How do I get the header to display a picture behind the site title and tagline. Is this in the lite version is this only possible through pro version? At this point all I can do is just change the color. Thanks in advance for any help.

    • This reply was modified 11 months, 3 weeks ago by  vfcpc.
    Theme Author Shaped Pixels


    Hi @vfcpc
    It would only be possible via custom CSS coding.
    There’s no option for that in the theme, not even the pro version.

    Check this site and then this site

    Both running the same template. Its the banner. Why does it not show completely side to side on one and on the other it does? in other words, does not stretch in full for some reason but why? both banners on each site are 2560×720.

    Thanks for any further help.

    Theme Author Shaped Pixels


    looks like you have Jetpack / Photon module enabled on
    Try switching it off – it usually scales the images down to a smaller size which causes the banner not to stretch full-width

    That was exactly the problem. Thank you very much Sir for help and fast response.:)

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Display Banner Images under the logo area’ is closed to new replies.