Develop Reference

White space at the bottom of the page on tablet/phone

I use a image as page background, this is the code:
body {
background-color: black;
background: url(/images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0%;
}
It looks okay on computer but if I open the page from a tablet or phone there is white space at the bottom of the page.
Here is how it should look:
And here is how it looks on tablet:

try,
html, body{
height: 100%;
}

Due to different aspect ratios of the image itself and tablets (many of them), you will always get some blank space when you use cover. Using height 100% will actually cover the entire height, but will stretch the image.
What you may need is to compare the aspect ratios of the image and the screen of the device and then try to use background-size (percentages) to zoom in or out of the image in order to cover everything in all devices.

Content scroll over background image - iOS and android

I am using a full page image background on a bootstrap template which allows text to scroll over the background when viewed on a desktop.
.background_html {
background: url(http://*******.com/web/4.jpg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have used a media query to load a smaller size image for mobile devices:
#media (max-width: 600px) {
.custom_bg_5 {
background: url(http://******.com/web/4_sm.jpg) no-repeat top center fixed;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}
}
This resizes the image correctly but the image doesn't remain fixed and just scrolls with the text. This leaves a blank space beneath the image as I scroll down (ie when the bottom of the image has been reached).
I want the text to just scroll over a fixed background image on mobile devices.
Is there a fix for this yet?

how to set background image for complete screen in phone gap android?

in android version of phone gap background image is not fully covering the screen though having high resolution image
body {
background-image: url("../www/img/tracker_bg.jpg");
background-size: cover;
background-repeat: no-repeat;
}
though using attachmend fixed and changed ever style to set background but for some screen it is not covering full screen as back ground

You can try this CSS3 Code:
body{
background: url(img/tracker_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Help From here

White space is coming while switching from portrait to landscape in android mobile

I am trying with html 5 and css 3 for creating mobile application where i tried with 1px strip image repeat. I tested in mobile native browser.While i change from portrait to landscape i found background flicker with a white background.
I also tried CSS3 background gradient, it seems to be not render fully till the html page ends, this is the style i used in my css style sheet
body{
background-image: url('../images/bg_strip.png');
background-repeat: repeat;
height: 100%;
overflow:none;
}

i am not sure but i am trying tos give you a good answer hope it will work fine to you.
background: url(images/bg_strip.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Why does this CSS not work for Chrome on Android but works everywhere else?

This really puzzles me. I want to have pic.jpg be static in the background (not move when scrolling) and that it won't stretch.
It works on every browser (i.e. Chrome, Safari, Firefox) except Chrome on Android (it even works on Android original 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 renders it as pic.jpg being halfway up in the screen, not on the entire page and doesn't stay static on scroll..
I can't reproduce it on jsfiddle, I also try to debug it with my Android phone and nothing seems to help.
Isn't this the way to create the background image?

I do not wanna be cruel but this issue has been reported approximately 4 years ago
http://code.google.com/p/android/issues/detail?id=3301
most recent response can help I guess:
In my experiments with Android, I noticed that all the other DIVs within the body behaved correctly, including centering, so I moved image to another DIV and it worked.
Funny one.
best

I have the similar problem.. and I fix it with this
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}

I have found a workaround that makes the background display correctly on 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 every other browser too.