2

I got stuck with a strange problem in Opera 12: I have an .svg image which is linked within my css code. When I resize to zoom-out the page where the image is displayed, Opera repeats the image as if I didn't use the "no-repeat" value in background-repeat. What am I missing?

Here is my css code:

.svgImg {
    background: url("../img/img.svg") no-repeat;
    height:100%;
    width:100%;
}

I also tried this:

.svgImg {
     background: url("../img/img.svg");
     background-repeat:no-repeat;
     height:100%;
     width:100%;
 }

But it didn't work. Why opera does that?

ErstwhileIII
  • 4,829
  • 2
  • 23
  • 37
tonix
  • 6,671
  • 13
  • 75
  • 136
  • Try to remove the `width` and `height` attributes in the SVG. [See answer here.](http://stackoverflow.com/questions/14859995) – totymedli Dec 28 '13 at 20:52
  • 2
    Why bother supporting Opera? – bjb568 Dec 28 '13 at 20:52
  • I have tried to remove rhe width and height but it still don't work. Any other suggestion? – tonix Dec 29 '13 at 14:58
  • Does it work in opera 15 or newer? If so, it's likely an issue with presto, which opera dropped for chromium layout engine in 15 and newer. – Anthony Jul 07 '14 at 07:04
  • Also, have you verified that the issue is only with SVG images? Do you get the expected behavior when you change the background-image to png or jpeg? – Anthony Jul 07 '14 at 07:07
  • Didn't try on a newer version cause I am using Linux and actually the latest version for it is 12. Guess I should not worry to much about it anyway cause it is quite an old version. – tonix Jul 07 '14 at 14:41

2 Answers2

-1

Try:

background-repeat:no-repeat!important;

Worked for me on Firefox v.88

jeyhunms
  • 79
  • 10
-2
.svgImg {
background: url("../img/img.svg") no-repeat;
height:100%;
width:100%;
}
thomas Bosser
  • 15