[Resolved] Background Image Size Not Consistent

Home Forums Support Background Image Size Not Consistent

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #944312
    Mary Pearson

    I’m creating a new site at https://playdome.ca/
    I am using Sections and all is fine with the exception of the background image in one section on phone.

    There are three sections in which I am using the same background (balloons). The second and third look perfect on phone but the image in the first section is larger than the other two, so the balloons are too big. On phone, the second and third sections show background with three complete balloons. The first section shows only two and a half.

    I have gone over the settings and they are identical for all three sections.

    How do I make sure that the first section background images shows the same as the second and third?

    #944663
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The background-size value is set to cover, so the image will cover the entire area. Your first section is taller than the other areas, so the image has more room to cover (which makes it larger).

    If you want to give those sections a custom class (balloon-bg or something), we can target them with CSS and make sure the images don’t cover on mobile.

    #944675
    Mary Pearson

    Thanks Tom. I’ve assigned balloon-bg to the sections. Can you tell me what CSS I need for @media (max-width: 768px) please.

    #944713
    Tom
    Lead Developer
    Lead Developer

    Does this helps?:

    @media (max-width: 768px) {
        .generate-sections-container.balloon-bg {
            background-size: auto;
        }
    }
    #944732
    Mary Pearson

    Perfect! Thanks so much Tom!!!!!

    #944750
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.