Background image with using css (on mobile phones)

HTML & CSS
1

Hi,

I’m trying to use background image that would auto resize (width and height) to the size of browser (to any size). I’ve used the code below, however it doesn’t work on smart phone (android). Width of image is done correctly, but height just doesn’t want to auto resize. Everything works normally on laptop browsers though. Any suggestions how to solve this?

Code that I use:

body {
	background: url(../images/grunge_background_mobile.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

Kind regards,

Boki

2

Background size is a new CSS3 property that is not necessarily well supported on mobiles. A better option might be to use media queries, and serve up a different background image to smaller devices. E.g.

body {
	background: url(../images/desktop.jpg) no-repeat center center fixed;
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
	background: url(../images/mobile.jpg) no-repeat center center fixed;
}
3

Thanks for reply. I use media queries to deliver smaller size image (also smaller width and hight), however it also doesn’t auto resize to scrollable height (it fits in width, but not height). I’ve added following property to body and that seems to solved the issue on smart phone somehow (although image is little bit distorted): background-attachment: scroll;

I’m sure there is some other solution?!?

4

According to caniuse Android has a problem with background-size.

Android 2.1 doesn't appear to honor background-size, only -webkit-background-size, which requires both width and height to be specified.

Try something like:


-webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;