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

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -