[Resolved] Elements behaviour

Home Forums Support [Resolved] Elements behaviour

Home Forums Support Elements behaviour

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2285898
    Petri

    Hi support,
    On my pages I have 2 elements with both a background image (photo).
    1. Block – Page hero (large header bg photo)
    2. Block – Hook – before_footer (same bg photo but only the lower part of the photo, 300 px height)

    In this way I want to give the impression that there is 1 large and tall (high) background photo, throughout the page.
    The strange thing is that the before_footer photo behaves differently, when I scale the page this photo seems to zoom in, so they don’t ‘match’ any longer. The max-width etc. is the same.
    Can you tell me how to make them look the same on all devices? Thanks

    #2286094
    David
    Staff
    Customer Support

    Hi there,

    thats really tricky to do.
    The issue is related to Aspect Ratio.
    The ratio of the image is different to the Container Block it is applied to.

    If you want an image to scale proportionally on all screen sizes then a) it needs to be full width and b) its height must match the images aspect ration, using the Minimum Height and vw ( viewport width ) values.

    Alternatively:
    Use one Container Block with no Padding, to add your background image.
    Then inside that Block add 3 more container blocks, one for the grid, one for the full width bar, and one for the footer image area. You can then control the spacing as you need.

    #2286442
    Petri

    Hi David,
    Will give it a try, thanks!

    #2286454
    David
    Staff
    Customer Support

    Let us know how you get on 🙂

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