Empty Anchor tag with a background image has no height

[Gammett]

I have been using the dev tools of the new chromium based edge (basically identical to chrome's dev tools) and my logo (The SVG with the id="nav-home") shows as a height of 0px. Whenever I put text inside that anchor then text shows up in it's place just fine. What should I be doing differently that I'm not right now to have the logo show up where it's supposed to in the flex box?

 

webpage documents in uploaded files, there should only be two text files, one for the html and then the external stylesheet with the css, as well as the .svg and .png that are a part of the site as well.

Test Site.rar

[kirashi]

25 minutes ago, Gammett said:

I have been using the dev tools of the new chromium based edge (basically identical to chrome's dev tools) and my logo (The SVG with the id="nav-home") shows as a height of 0px. Whenever I put text inside that anchor then text shows up in it's place just fine. What should I be doing differently that I'm not right now to have the logo show up where it's supposed to in the flex box?

 

webpage documents in uploaded files, there should only be two text files, one for the html and then the external stylesheet with the css, as well as the .svg and .png that are a part of the site as well.

Change the CSS to this, and you'll have progress. (at least I did in Chrome.) You'll have to play with the positioning, but otherwise it displays OK.

 

#nav-home {
    background-image: url(../assets/Logos/Placeholders/Perfect Stitch Upholstery Logo - SVG Trace.svg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-origin: content-box;
    background-position: center;
    background-size: contain;
    min-height: 400px;
    display: block;
}

[Gammett]

54 minutes ago, kirashi said:

Change the CSS to this, and you'll have progress. (at least I did in Chrome.) You'll have to play with the positioning, but otherwise it displays OK.

 

#nav-home {
    background-image: url(../assets/Logos/Placeholders/Perfect Stitch Upholstery Logo - SVG Trace.svg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-origin: content-box;
    background-position: center;
    background-size: contain;
    min-height: 400px;
    display: block;
}

Thank you soooooooooooooooooooo much, I've posted this to other places and no one has responded but you, and even better: it works!

You're a lifesaver, bro!