My logo image isn't visibile

[bendqh1]

MediaWiki 1.38.2 website.

I have uploaded a vector (.svg) logo image but it isn’t visible.
Instead, a blank square is detectable (with a browser devtool).

If I add background-size: 190px to the <a> tag of the logo, I can see a cropped image.

What is going on there?

hanekudai.com

[Gandalf]

Where is it you expect the logo to appear?

[bendqh1]

Just above the sidebar menu.

Identical to the way it is in Wikipedia websites.

[Gandalf]

You have put background-position and background-repeat on the <a> tag reather than on the image. I’m not sure if that’s the whole problem, but it’s part of it.

[bendqh1]

The <a> tag already has:

background-position: center center;
background-repeat: no-repeat;

[Gandalf]

And it shouldn’t be on the a tag. As I say, it belongs on the image.

[bendqh1]

Oh, please forgive me, I’ve read “you have to put” instead “you have put”.
Having the word “putted” instead “put” might have prevented this confusion of mine.

Anyway, okay, the CSS is coming from MediaWiki core. I don’t think I want to change the core, just to figure out how to trick the CSS to show the image.

[bendqh1]

Please read updated question.

[bendqh1]

#p-logo a {
    background-size: 160px;
    background-position-y: 0;
    background-position-x: 0;
}

Seems to me to solve the problem.

[DaveMaxwell]

The issue was caused by putting a background image on an inline element. You can simplify your css greatly by putting the background on the div instead.

You can remove

.mw-wiki-logo {
   background-image: url(/hanekudai.svg?177b7); 
}

and

#p-logo a {
    background-size: 160px;
    background-position-y: 0px;
    background-position-x: 0;
}

and

#p-logo a {
     background-position: center center; 
     background-repeat: no-repeat; 
     display: block; 
     width: 10em; 
     height: 160px; 
     text-decoration: none; 
}

Then change the #p-logo to

#p-logo {
    width: 10em;
    height: 160px;
    margin-bottom: 1em;
    background-image: url(/hanekudai.svg?177b7);
    background-size: cover;
}