android - CSS Background COVER property doesnt works on Phone -


i'm experiencing strange issue: when open website on android 4.1 phone (default browser), background image doesnt cover background should.

here screen phone:

screenshot phone running browser

pieces of code, according 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 i've tried setting min-hegith , width property @ 100 % - didnt make things work.

hope have ideas, how figure out issue.

try following code snippet. seems problem of native android browser parse multiple css tags background property. 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')"; 

Comments