i working on mobile design website. on page have image svg , here's why: there text overlay on image when exported png both quality lost. tried exporting text svg , layering on png image, didnt work either. when in google chrome's dev tools (iphone 5 selected) svg image loads fine - dont know going on, feel have tried every trick knowledge. there way around it?
you can view page working on here dont forget view on iphone 5 using dev tools
i set snippet more or less say. have svg on top of image.
the code easy:
<div class="bg-img"> <svg height="150" width="500"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> sorry, browser not support inline svg. </svg> </div> and css is:
.bg-img { background:transparent url(https://shanshad1.files.wordpress.com/2013/06/c1d53-its_magic.jpg?w=383&h=469) no-repeat center center; background-size:cover; padding:40px; min-height:400px; } although need background-size , background effect. other styles emphasize result...
.bg-img { background:transparent url(https://shanshad1.files.wordpress.com/2013/06/c1d53-its_magic.jpg?w=383&h=469) no-repeat center center; background-size:cover; padding:40px; min-height:400px; }<div class="bg-img"> <svg height="150" width="500"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> sorry, browser not support inline svg. </svg> </div>
Comments
Post a Comment