How to set a Header Image Max Height, thereafter center and maintain image size

  • Unknown's avatar
    20happyvisiongroup · Member ·

    Trying to adjust my site so that as the page gets larger, the header image (banner of icons) only grows to a certain max height (and corresponding width).

    Thereafter I’d like the image size to be locked and centered on the screen with the sides being filled in with background white.

    Any help would be greatly appreeshed.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the existing header image has a height of 150px. Let’s start out with this and see what you think. You can adjust the max-height value as desired. The second rule I added to keep the image from being cut off on the right on smaller windows/screens so it would be fully visible. 

    .header-image img {
    height: 100%;
    max-height: 80px;
    width: auto;
}
.header-image {
    margin-left: 10px;
    margin-right: 35px;
}

    Let me know what you think with this.

  • Unknown's avatar
    thesacredpath · Member ·

    Oops, forget the second rule, it was operator error. My browser window was slightly off the right of my screen. That adjustment isn’t needed.

  • The topic ‘How to set a Header Image Max Height, thereafter center and maintain image size’ is closed to new replies.