Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Gammett

Empty Anchor tag with a background image has no height

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;
}

image.png.3f37a0c21ec9cb63dd2f9a33c5f626b2.png

Recommended Posts

Posted · Original PosterOP

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


I know the answer to Fermat's last theorem but there isn't enough room in my signature to announce it.

Link to post
Share on other sites
Posted · Best Answer
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;
}

image.png.3f37a0c21ec9cb63dd2f9a33c5f626b2.png


Desktop: KRySTaLoGi-PC Build Log (i7-4790K, RTX2060) Mobile: OnePlus 5T | Bell - Unlimited Calling & Texting + 10GB Data
Laptop: Dell XPS 15 9560 (the real 15" MacBook Pro that Apple didn't make) Tablet: iPad Mini 5 | HP Touchpad | ASUS ME302C
Camera: Canon SX280 + Rebel T1i (500D) | Sony HDR-AS50R | Panasonic DMC-TS20D Music: Spotify Premium (CIRCA '08)

Link to post
Share on other sites
Posted · Original PosterOP
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;
}

image.png.3f37a0c21ec9cb63dd2f9a33c5f626b2.png

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!


I know the answer to Fermat's last theorem but there isn't enough room in my signature to announce it.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×