css3 - CSS: Background size contain and positioning in IE/Safari -
hello there bit confused behaviour on responsive css background image in ie11/safari 5 works in chrome , firefox:
#contentheader_logo_inner { background:url('images/logo.svg') right top no-repeat; background-size: contain; display:inline-block; max-width:200px; width:100%; height:100%; }
the thing svg background image contained within dynamically scaled div (which has width/height in percent), in ie , safari displayed left instead of right when scaling.
is there solution this?
your code:
#contentheader_logo_inner { background:url('images/logo.svg') right top no-repeat; background-size: contain; /* thats wrong */ display:inline-block; max-width:200px; width:100%; height:100%; }
change:
#contentheader_logo_inner { background:url('images/logo.svg') right top no-repeat; background-size: 100% 100%; /* full size background */ background-origin: content-box; /* placing background words place (content-box) */ display:inline-block; max-width:200px; width:100%; height:100%; }
Comments
Post a Comment