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')";
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
body{
background-image: url("./content/site_data/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
font-family: 'Lobster', cursive;
}
Check: http://demo.jayantbhawal.in on firefox browsers, NOT in widescreen mode.
The code works on Chrome(Android + PC) and even the stock Android browser, but NOT Firefox(Android + PC). Is there any good alternative to it? Why is it not working anyways? Googled this issue a lot of times, but no one else seems to have this problem. Is it just me? In any case, how do I fix it?
There are quite some questions on SO about it too, but none of them provide a legitimate solution, so can someone just tell me if they have background-size: cover; issues on firefox too?
So basically tell me 3 things:
1. Why is it happening?
2. What is a good alternative to it?
3. Is this happening to you too? On Firefox browsers of course.
Chrome Version 35.0.1916.114 m
Firefox Version 29.0.1
Note: I may already be trying to fix it so at times you may see a totally weird page. Wait a bit and reload.
Well it looks alright to me in latest mozilla.
Try using this if you face problems
body {
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Lobster', cursive;
}
Edit
As some more clearance of answer to OP from comments
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
Its shorthand for,
background-image: url("./content/site_data/bg.jpg");
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
Read more here
So I just came across this question because I was having the same problem. It turned out the issue (in my case anyway) was not having
<!DOCTYPE html>
at the top of my html file (this only seemed to affect the background-size: cover in Firefox.
For Firefox:
~$ firefox -v
Mozilla Firefox 68.9.0esr
This centers the image...
body {
background-color: #1D4979;
background-image: url(../images/background-2.png);
min-height: 100vh;
min-width: 100vw;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size was added to Firefox 3.6, however the -moz vendor prefix was required.
use
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
bhawal,
I think you are using older version of mozilla. Well, this is a common practice to add vendor specific prefixed properties together with W3 standard. We do this just to make sure that it work in most of the browsers.
In your case, you can use the CSS rule below:
body {
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;
}
Let me know, if this doesn't work; and vote up if it works. :)
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
I am having some issues with my background only not loaded correctly on the android mobile screen. Works fine on apple. The styling I have used for the background 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;
}
You can also view the site at: www.bingetech.com
i think it could be because you have not defined a scale within your viewport meta tag.
Try:
<meta name="viewport" content="initial-scale=1.0" />
[edited] with max-scale too
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Another thing i would add is
CSS
html, body {
min-height: 100%;
}
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.