Container background not showing on Apple tablet

Hi there,

The problem is caused by setting the background-attachment to fixed, IOS devices do not like this setting.

You will need to change the value of the property to initial on tablet and mobile

Do you have GB Pro? If so, you can do so in the advanced panel.

If you don’t, then try this:

1. Add a CSS class to the container that contains the background image, eg. hero-container.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

2. Add this CSS:

@media(max-width: 1025px) { 
.hero-container {
    background-attachment:initial;
}
}

Hi there,

Can you try updating the CSS with this one:

@media(max-width: 1025px) { 
   .hero-container:before {
      background-attachment:initial !important;
   }
}

I just cheked with my iPad, the hero image shows correctly after adding the CSS.

the problem only arises when the tablet is in landscape :/ Could you please check one last time?

Yes, I’ve checked both directions.

However, it’s possible that your client’s iPad has a higher resolution, so even with a 1025px breakpoint, the issue still occurs.

In that case, disabling the fixed position for the background image on all devices should fix the problem.

Hello Ramon, this is a wellknown problem, I wrote a fix for this, maybe this helps too:

Please give the container with the image a class fixedipad

Then put this in your childtheme or additional css:

@media only screen and (min-width: 768px) and (max-width: 1366px) {
.fixedipad {
background-attachment: initial !important;
background-position: 51.0781% -0.560142% !important;
}
}