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:
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
Post a Comment