Geek Answers Handbook

Why is this CSS not working for Chrome on Android, but working everywhere?

It really puzzles me. I want pic.jpg to be stationary in the background (do not move when scrolling) and that it does not stretch.

It works on all browsers (e.g. Chrome, Safari, Firefox), except Chrome on Android (it works even in the original Android browser)

body{ background-color: transparent !important; background-image: url(<%= asset_path "pic.jpg" %>); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Chrome for Android displays it as pic.jpg, being halfway on the screen, and not on the entire page, and does not remain motionless in the scroll.

I cannot play it on jsfiddle, I am also trying to debug it using my Android phone and nothing helps.

Isn't that a way to create a background image?

+8
android css google-chrome twitter-bootstrap ruby-on-rails-3
source share
3 answers

I do not want to be cruel, but this issue was reported about 4 years ago

http://code.google.com/p/android/issues/detail?id=3301

The most recent answer may help, I think:

In my experiments with Android, I noticed that all the other DIVs inside the body behaved correctly, including centering, so I moved the image to another DIV, and it worked.

Funny.

it's better

+4
source share

I have a similar problem .. and I fix it with

 html{ height:100%; min-height:100%; } body{ min-height:100%; }
+4
source share

I found a workaround that correctly displays the background image in Chrome for Android: define the background in the html tag, not the body. Here is the new css:

 html{ background-color: transparent !important; background-image: url(<%= asset_path "pic.jpg" %>); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

And yes, this is valid markup . In my experience, the background still works correctly in any other browser.

0
source share

More articles:


All Articles