CODEWITHSUNDEEP
androidcssgoogle-chrome
whatyouhide
whatyouhide

Reputation: 16781

Android Chrome behaving badly with background property

I'm developing a personal website, and I'm having some issues with Chrome on Android. I have a background image covering up all the page, and it works fine in every browser I own (Chrome, Opera, Safari, Firefox) and on every mobile browser I own (Chrome on iOS, Safari on iOS, even default Android browser).

Here's the CSS for my body:

body {
    width: 100%;
    height: 100%;
    background: url(../images/background.jpg) no-repeat center center fixed;
    background-size: cover;
}

What happens on Chrome for Android is that the background covers only the available viewport (above the fold), while disappearing below the fold.

Here's a screenshot:

Above the fold the background disappears Could it be a problem with using body instead of the more classic wrapper #container div? I would really like to resolve this without having to clutter my markup; I'm confident it's something possible since it works in really most browsers.

Maybe it's a Chrome for Android bug?

Upvotes: 1

Views: 1653

Answers (2)

whatyouhide
whatyouhide

Reputation: 16781

As suggested in the comments, the problem was explicitly setting height: 100% on the body, which made it stick to the viewport height.

By removing that constraint, now the background extends to all the content.

Upvotes: 1

Matt Gaunt
Matt Gaunt

Reputation: 9821

Switching to min-height: 100% for body and html should give you the same affect.

Otherwise could you provide an example URL or code example of jsbin.com

Upvotes: 0

Related Questions