Background image not responsive on tablets

Hi Carlotta,

I know that iOS device don't like the fixedproperty, not sure about Android devices.

The fixedbackground image gets pixelated on tablet and mobile.

The reason that on mobile it looks ok is that GB added CSS to switch the fix to initial for mobile.

So we can do the same for tablet, try add this CSS:

@media (max-width: 1025px) {
    .gb-container-15f52c70:before {
        background-attachment: initial;
    }
}

I'm afraid there's no way to make the background image fixedand work properly on Tablet and mobile.

Hi Ying,
thanks for your feedback. I tried with your css but it didn't work for landscape on tablet. I changed max-with to min-with: 768 and this works fine.

@media (min-width: 768px)
{
.gb-container-15f52c70:before {
background-attachment: initial;
}
}

Then I had to add additional css for desktops so the fixed one is still working.

@media (min-width: 1280px)
{
.gb-container-15f52c70:before {
background-attachment: fixed;
}
}

Can you tell me where I can find the .gb-container-xxxxxx names because I have the same problem on each page.

Thanks for feedback.
Carlotta

Hi there,

remove the CSS you have added - and try this CSS instead:

@media (pointer: coarse) {
    .gb-container:before {
        background-attachment: initial !important;
    }
}

This will apply to ALL Container background images that are set to a Pseudo element. And will apply to any Touch device regardless of the screen size and orientation.

Hi David, sorry for being so late with my feedback. Was away for a few days. I replaced my CSS with yours and it works perfectly! Thank for helping me.
Carlotta

Glad to hear that!