scale - background-size in different browsers -
i have difficulties showing scaled background on different browsers. created website on google chrome browser, when loading site on iphone or earlier version of ie, background doesn't scale, or doesn't show @ all.
i used css code:
background-size: 100% 150%;
then changed to:
background-size: auto;
but still gives troubles. idea how resize/scale image on every browser , ie version 6 now?
edit
with code below, works on chrome, ff , latest ie, on ie8(and below think) show unstretched picture. on iphone doesn't show @ all. :/
#head-div { padding-bottom: 15%; width: 100%; background: url(../img/banner.gif) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-filter: progid:dximagetransform.microsoft.alphaimageloader(src='../img/banner.gif', sizingmethod='scale'); }
body { background: url(image.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:dximagetransform.microsoft.alphaimageloader(src='image.jpg', sizingmethod='scale'); -ms-filter: progid:dximagetransform.microsoft.alphaimageloader(src='image.jpg', sizingmethod='scale'); } these requirements cross browser. there's 5 of these exact questions on stack overflow answers mine there no need ask question
Comments
Post a Comment