I have a mobile responsive theme that I have created, and it works great.. On everything except android. The background image loads and looks fine, but it does not render on parts of the site that are not in view when the page is loaded. Any time you scroll down the page, the background is white. The code that I have at this time is:
body
{
background: url('images/MobileBack.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have tried some other variations of this declaration, but to no avail. Is there a way to load the background on Android using just CSS, or do I have to delve deeper? (PS. it works fine on iPhones and iPads).
Okay, the issue was the center center fixed appendage to the background declaration.
you need to use media query to fix this problem
#media screen {
background: url('images/MobileBack.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
hope it works if not then if you don't mind let me see its screen shot
Related
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
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;}
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;
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.
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