Resize/Shorten the height of the header/featured image?

  • Unknown's avatar
    consultgrowth · Member ·

    Hi,

    I’d like to shorten the height of the header image of my website? Please advise what I should do?

    Many Thanks,
    Alex

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

  • Unknown's avatar
    consultgrowth · Member ·

    Regarding my above query, I’d like to shorten the height of my image to the featured image to 410 pixels.

    Thanks,
    Alex

  • Unknown's avatar
    carladoria · Member ·

    Hi there,
    To shorten your header image to 410 pixels, use this CSS:

    element.style {
    background-image: url(https://consultgrowthdotcomdotau.files.wordpress.com/2016/02/greenhouse-female-sitting.jpg );
    height: 410px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    @carladoria, if you set a CSS rule for “element.style” in the custom CSS, it will apply to any HTML element that has a “style” declaration within the HTML. Anywhere you see something like this example
    <div style="...">
    so you want to use the actual CSS class or CSS id of the element you wish to change. In the case of the featured image in the Grow Your Business section at the top of @consultgrowth’s site, the height of the image is actually set with top and bottom padding on the #hero div (originally 140px top and bottom). To make the image shorter vertically, we would need to do this 

    #hero {
    padding-top: 80px;
    padding-bottom: 80px;
}

    which gives us right at 410px height on that image.

  • Unknown's avatar
    carladoria · Member ·

    @thesacredpath – thanks so much for the clarification. I haven’t realized that since it changed only the header when I applied the CSS change and I couldn’t find another tag that would do the same. But it’s good to know this now and through these forums I’m learning a lot!

  • Unknown's avatar
    thesacredpath · Member ·

    @carladoria, you are welcome, and many thanks for your help in the forums. It is greatly appreciated.

  • The topic ‘Resize/Shorten the height of the header/featured image?’ is closed to new replies.