Background image looks like a grid (issue and workaround)

When you set your page to use an image as a background with the “Repeat” checkbox checked, on some Android phones the background appears with a slightly visible “grid” on top of it. (There is a slight space around each image).

To fix this issue, do the following:

1. Open the mobile page in the page editor and click on the Settings link at the top.

2. There into the Header HTML insert field copy and paste the following code:

<style>
body {background-attachment: scroll !important;}
</style>

3. Click on Save.

You would need to do this to every page that has this issue.

Here is what’s going on

Our page background images are set to the “fixed” position (meaning that they won’t scroll with the page). Fixed image position works better design-wise when the background image is large, but makes almost no difference with small repeated background images.

Some Android phones have a bug with the fixed background position, adding a little space (margin) next to each background image instance. This issue, of course, happens only when the background image is small, as larger images can cover the whole page area. We have no easy way of knowing if you have a large or small background image, and instead of offering an automated fix, we offer the above workaround.