Height of masthead image

  • Resolved mnatseah624

    (@mnatseah624)


    5 years, 3 months ago

    I’m looking for a piece of Additional CSS code to adjust the height of my masthead image, so that I can adjust it to 100% of the original image, or make it a bit smaller, if it looks better.
    Can anyone help please?

    The page I need help with: [log in to see the link]

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

  • Hi @mnatseah624,

    The height of the header is set by a combination of the height of the title and navigation bar and the padding that is set on top of it. You can adjust that with CSS like this that changes the padding:

    
@media screen and (min-width: 768px) {
    .site-header {
        padding-top: 200px;
    }
}

    You can set the entire image to display, but you may run into some letterboxing depending on the screen size.

    
header#masthead {
    background-size: contain;
    background-repeat: no-repeat;
}

    See if that helps out.

    Thread Starter mnatseah624

    (@mnatseah624)

    Dear @3sonsdevelopment , that’s really helpful. Thanks very much.
    Have a great day.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Height of masthead image’ is closed to new replies.