Develop Reference

Resizing Background on ipad/tablet

All currently developing this forum/site:
http://nfldynasty.boards.net/
Lots to finish in terms of content, however I'm currently having some problems resizing the various backgrounds on mobile devices such as ipad and Samsung android tablet etc.
All seems to work well when viewing on laptop via both google chrome and internet explorer.
The code I'm using is as follows
body {
-webkit-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html { height: 100%; width: 100%; }
I cannot seem to work out a way of adjusting the background size on ipad/tablet etc without either changing this on internet explorer to changing the size of the text boxes. i.e. when I change the html tab from 100% to say 75% the background remains unaltered but the size of the forum categories reduces
If I remover the final html line then on all devices the image is distorted when zooming in and out on the text.
Any ideas?

You can try using this for smaller screens:
body {
background-color: #000;
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
}

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;

Strange behavior with Background-image on stock android browser

Whenever I use the below CSS (I also declared it with the shorthand and got same result) I get this strange "BES" that appears for a split second on the page when viewed on certain Android Stock browsers.
html {
background-image: url(http://www.cynthiapacephotography.com/wp-content/themes/pace_origin/images/background2.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Even if I remove all the extras and just leave it like below, I still get the weird letters
background-image: url(http://www.cynthiapacephotography.com/wp-content/themes/pace_origin/images/background2.png);
I don't get this on the iPhone or Chrome on Android devices. I finally just added a media query and just using a background color on mobile devices. With just the background color and no image, I don't get the letters anymore. I also tried a handful of background images and this always happens when using a background image.
Any ideas of what this is and what's causing it?
Here's a shot of what I see:

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.

Android/ phonegap - Stretching my background image to fit screen

I have tried various differnt things however none of them seem to work. I am using inline CSS and simply want to add a background which stetches to the screen size. I am currently using the following code within my body tag:
<body onLoad="onBodyLoad();" style="background:url(images/blue_bg.png);">
My image is 400 x 300, but need to be streched to as far as 1200 x 1000.
Hope someone can help (have tried background-size:100%).
Thanks,

You can try this CSS3 code:
body{
background: url(images/blue-bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If this doesn't work you can try :
Other CSS techniques
jQuery techniques