Are you using the same CSS on all pages? Perhaps you should get a framework for “mobile-first” like Bootstrap? I did not look at the layout of the site, just the CSS. I do not have an Android phone to test on. But, I see a lot of talk on the internet about Android having troubles with a full background. There are many many different ways to fix it. But, can not test it for you. There is an Android emulation app somewhere, but, you can test it. Here is another fix that says NOT to attach it to the BODY at all and just use HTML instead. Try this one:
html {
height:100%;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here is another one that they said to just use the BODY tag not the HTML tag:
body {
height:100%;
width:100%;
background size:cover;
background-repeat:no repetitions;
background position:center;
background insert:fixed;
}
And, lastly, another site mentioned that you need to set the size based on the screen size. So, for phones, you could so something like this:
@media (max-width: 650px) {
body.custom-background {
background-attachment: scroll !important;
}
}
That one is really the way you go for phones, you adjust the settings depending on how big the size of the screen is. In this example it alters whenever the screen size is 650 pixels or less.
Further questions. Which Android? 2.1’s have a lot of trouble with backgrounds. And, which browser? Chrome for Android, Firefox for Android, Androids built-in one? That might make a difference, too.
So, some testing possibilities for you to start with. Good luck!
