[Resolved] Header same height of background image

Home Forums Support [Resolved] Header same height of background image

Home Forums Support Header same height of background image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1615329
    Daniele

    Hello,

    I set a background image for my homepage header.
    What I would like to do is to show always the full image, without cropping, so I set background-size: contain;

    Now I would like the header height to be the same of the background image, regardless the screen of the device (because from mobile and tablet I got some white space below).

    How can I achieve that?

    actually I’m using:

    .homepage-hero {
    min-height: calc(100vh – 200px);
    }

    to set the width of the container

    thanks

    #1615433
    David
    Staff
    Customer Support

    Hi there,

    try this instead:

    1. Set the background to cover.
    2. Set the top padding to 56% ( not pixels )
    3. Remove the CSS for the min-height.

    The 56% is equal to the aspect ratio of your original image ie. 1440(H) / 2560(w) * 100 = 56.

    You may need to reduce it a little as the button inside the content also increases the height.

    #1615534
    Daniele

    Thanks,
    that’s clever!

    #1615569
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.