CODEWITHSUNDEEP
androidcssbackground
Payam Shakibafar
Payam Shakibafar

Reputation: 1125

background-size:cover not working in android native browser

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

Upvotes: 7

Views: 13782

Answers (3)

jcubic
jcubic

Reputation: 66488

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

Upvotes: 0

yonas
yonas

Reputation: 893

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.

Upvotes: 0

Payam Shakibafar
Payam Shakibafar

Reputation: 1125

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;

Upvotes: 13

Related Questions