I have a code which makes a background picture cover the whole screen, not just the content. It works fine with a computer and an iPhone but with an android the picture doesn't stretch length wise to cover the whole screen vertically. The code is as follows.
CSS:
body {
background-image:url(background.png);
border:none;
background-size:100%;
-webkit-background-size:100%;
-moz-background-size:100%;
-o-background-size:100%;
background-attachment:fixed;
background-repeat:repeat-x;
}
The image is 5x500 pixels. If you have a better solution to cover a page with a background image then let me know.
Background size can ggive problems sometimes. Try adding a min-height to html
Try Adding
min-height: 100%;
to the body
Try setting your properties like this:
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
backround-size can be finicky.
Have you looked at background-size:contain? Personally, I am a fan of background-size:cover, which may help as well.
I came across this post because I was looking at an Android background size issue. If it doesn't help the OP, at least hopefully, it will help someone else.
The android issue is related I experienced was Android not liking the shorthand for background and having a background-position and a background-size. Separating, like it looks like you have, solved the issue.
Related
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
I'm trying to fit a background image to it's container using background-size:cover.
here is my fiddle : The Fiddle
it works in all browsers but not working in Android native browser..
anybody has any solution please ? thanks
After searching about this problem and finding no solution, I deleted background-image from CSS file styles and used an inline style in HTML codes. The problem with android native browser is solved.
I updated the fiddle and it's working in android native browser.
The Updated Fiddle
it seems that android also has problem with parsing background format like this :
background: url('...') fixed center center / cover;
and we should separate the background-image form others and use it inline, and then use each option separately in css file, like this :
background-size: cover;
background-position: center center;
Unfortunately, the background-size property isn't fully supported by older versions of Android's native browser and Chrome for Android. I went through the pain of discovering this the hard way. Instead of using "cover" as a value, do the following:
background-size: 100% auto;
What this does is give you the same horizontal feel as "cover" and then automatically sets the height of the image, assuming that the image has intrinsic dimensions.
For further reading, I recommend diving into the detailed writeup from Sara Soueidan.
I had the same problem with background-size: cover, the image was fit to the width of the device and below there was white background, and it was fixed when I set background-color using this css:
background-color: #fff;
or shorthand:
background: #fff url('http://cdn.stupiddope.com/wp-content/uploads/2013/06/IMGP3540.jpg') no-repeat scroll center center / cover;
it doesn't matter which color you pick because it will be invisible.
JSFIDDLE
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last
I'm getting a issue with the image background repeating(see image). Even though i have set the CSS property to no-repeat. The source is http://www.pcpal.co.uk/mobile/
PS sorry about the image being so big.
also is there any good tools/resources I can use as i'm new to creating a mobile site..
I have solved my own issue in the end. I removed a comma from my CSS code..
background-position: 5px, center;
to
background-position: 5px center;
Many Thanks to those who took the time to read my problem
So I'm making an app for android 2.1 using phonegap and there is some extra blank margin on the right side (about 5px) that makes the page horizontally scrollable (I really want to avoid that).
I went crazy changing and testing css until I tried to check widths with javascript.
(device is 320px wide)
main div is 320px, body is 320px and document is 320px... but window is 325px!
I'm blaming it all on this window weird width, but I don't really know what to do...
I guess this is some kind of bug (since everything runs fine on 2.2). But is there a workaround? Is someone experiencing this too? Thanks in advance!
It's hard without code, but I had the exact same problem and solved it with:
body {
margin: 0px;
}
Maybe padding too. Check your page in a browser like Chrome and check the metrics of the body or any other elements that might cause problems.
problem solved, although it doesn't make much sense...
my "main div" (which covers all the page) had this css rules:
.main-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
it seems that there is some kind of calculating issue with this positioning in android 2.1 that makes it larger than it is meant to be.
after changing the positioning from "absolute" to "fixed", it becomes fit with the screen, no right margin.
it may be a bad fix for one who needs to use the absolute positioning, but it's fine for my case.
i hope this helps someone someday ;)