Why background-repeat: no-repeat doesn't work with .svg images in Opera 12?

Question

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?

Neighborly

Try to remove the width and height attributes in the SVG. See answer here. – Brezin

Why bother supporting Opera? – Shipley

I have tried to remove rhe width and height but it still don't work. Any other suggestion? – Neighborly

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. – Keir

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? – Keir

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. – Neighborly

Answer 1

Try:

background-repeat:no-repeat!important;

Worked for me on Firefox v.88

Henn

Answer 2

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

Oder

Please add some explanation with your answers. It will helps others understand your reasoning. – Cistercian