HTML/CSS - responsive background doesn't work only on Android - Chrome
Question
My responsive background works well on PC Safari, Chrome, Firefox, Opera. It works as well in Firefox on Android. But in Chrome on Android I'm getting something like this:
Do you have any idea how to fix it? I want it to be fullscreen on Android Chrome too. I've tried everything...
CSS and HTML code:
.background { background-image: url("images/bgsky2.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; height: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body class="background"> </body> </html>
2 answers
solution1
2 ACCPTED 2016-09-01 18:10:42
This issue was reported meny years ago !
See this link will help :
http://code.google.com/p/android/issues/detail?id=3301
And i remember this code helped me :
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
solution2
1 2016-09-01 18:00:18
Try this:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.