Develop Reference

background image not displaying on phone

Working on new page with background image. Displays fine on desktops and tablets but fails on android phones.
body {
background: url("images/bk1.jpg") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}

This question was asked before but it was about IOS: How to replicate background-attachment fixed on iOS
I Think the problem related to background-attachment fixed, so i think you need to make it like this:
*notice: the property of background-attachment won't work on mobile
body {
background: url("images/bk1.jpg") no-repeat center center;
background-attachment: fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}

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;
}

Background image not responsive when viewed on mobile or iPad

I am having an issue with the background image for my site.
When re-sizing in the browser (chrome) it responds how it should, however when I upload it to my server and open the site from my mobile device, it does not re-size. The image just stays the original size and is zoomed into one area of the image.
Can anyone help please?
Here is the code:
html{
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-color: #FFF;
}

for small devices use following property
html{background-size: 100% auto;}

CSS Background COVER property doesnt works on Phone

I'm experiencing a strange issue: When I open a website on my Android 4.1 phone (default browser), the background image doesnt cover the background as it should.
Here is the screen from phone:
Pieces of code, according to background attributes:
...
<meta name="viewport" content="width=device-width">
...
background: #fff url('img/main_bg.png')no-repeat center center;
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
Although, things that I've tried is setting the min-hegith and width property at 100 % - didnt make the things work.
Hope that you have any ideas, how to figure out this issue.

Try the following code snippet. It seems to be a problem of the native Android browser to parse multiple CSS tags for the background property. So define each property seperate might help:
...
<meta name="viewport" content="width=device-width">
...
background-image:url('img/main_bg.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/main_bg.png', sizingMethod='scale')";

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.