Header image not full height

  • I’m using the evolve theme (can’t see how to find the version #, but I installed just yesterday, so it should be recent).

    I’ve uploaded a header image carefully sized at the 1200×200 recommended.

    When I use ‘cover’, the image stretches to the width of the browser, but the bottom is cut off – covered by the menu bar. I’ve tried setting the header image height to 100%, or to 50px, or to 250px – none of it makes a difference. The width of the browser seems to determine how much of the image is cut off.

    When I use ‘contain’, the image is complete and centered, but the theme does nothing with the header background colour setting.

    I’ve tried adding padding via custom CSS with no result at all (even with 1000px) :
    .header {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 1000px;
    padding-left: 0px;
    }

    How can I either:
    a. (preferred) ensure that the full height of the header image shows, no matter how wide it is stretched?
    b. use the contain option, but fill the blank space with a chosen color?

    The site is still in very early development and not published, so I can’t post a URL.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    Thanks for writing in,

    Unfortunately, without looking into your setup its hard to assist you with our best. However, you can choose any background color of your header by adding this following code under Appearance > Theme Options > custom CSS:

    .header {
  background: #e3e3e3;
}

    Thanks.

    Thread Starter Evil Overlord

    (@evil-overlord)

    I’ve made the site live, here: https://50.87.248.207/~metaphp8/

    Thread Starter Evil Overlord

    (@evil-overlord)

    I’ve given up on the header image, and am using logo instead, since it doesn’t get cut off, and it’s more properly responsive. Also, the CSS background color fix works.

    However, I can’t figure out how to make the logo 100% wide. No matter what I try, or what size the logo, there’s always padding on left and right.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header image not full height’ is closed to new replies.