[Resolved] Background Image Size Not Consistent

[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?

[Tom]

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.

[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.

[Tom]

Does this helps?:

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

[Mary Pearson]

Perfect! Thanks so much Tom!!!!!

[Tom]

You’re welcome 🙂

[Author]

Posts