[Resolved] Why does Headings affect the cropping of the background image?

Home Forums Support Why does Headings affect the cropping of the background image?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1460539
    Carsten

    Hi there, why does Headings affect the cropping of the background image (1920×1280)?

    The more headings and text I add to the container block, the more cropped and enlarged my background image gets on my phone, why?

    If I crop the image to fit the phone screen (768×1280), it gets even worse?

    I want to preserve the framing of the image, so as much of the image is displayed, like it is, before text is added?

    Thanks!

    #1460798
    David
    Staff
    Customer Support

    Hi there,

    Background Images are set by default to Cover the container they are added to. This means the image always fills the space, but images will not be 100% displayed unless the containers aspect ratio matches that of the original image.

    For Full Width Containers only – we can set an empty containers aspect ratio to match that of the image by using % top padding.
    First calculate the original image aspect ration: Image Height / Image Width * 100 = %aspect ratio

    eg. 1280 / 1920 * 100 = 66%

    Now we can set the Top Padding ( or combined top and bottom padding ) of the container to 66%. This will now maintain the original aspect ratio and show the full image on all screen sizes.

    However this only applies to an empty container that is spanning the full width of the browser.

    When adding content to a container – the content now introduces height to container, and the height it adds will be variable based on screen size ie. narrower screens will force text to wrap to more lines further increasing its height.

    The reality here is you cannot make a landscape image fill a portrait container without either some of the image being cropped or there being a lot of whitespace.

    There is not automatic or simple way to correct this especially across all screen sizes.

    #1460864
    Carsten

    Hi there, thanks for your thorough explanation

    The reality here is you cannot make a landscape image fill a portrait container without either some of the image being cropped or there being a lot of whitespace.

    That sounds like logic, but why is the issue then even more pronounced if I crop the image to fit portrait, like the example attached?

    Thanks!

    #1460868
    David
    Staff
    Customer Support

    Is the background attachment set to fixed ?

    #1460877
    Carsten

    No it’s not, but it is only an option for the cover block, not the container?

    #1460882
    Carsten

    But the question is, how I should scale an image 1920×1280 to fit horizontal best, apparently 768×1280 is not the way to go?

    Thanks

    #1461274
    Carsten

    I think I just leave my Headings outside the container, to avoid the cropping.

    Thanks!

    #1461407
    David
    Staff
    Customer Support

    Glad to hear you found a solution!

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