Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Luka Sarich
Luka Sarich
13,204 Points

Can't get the logo to be full size of span container

Happy Holidays to anyone reading this! :) I have been stuck on my personal website. First off I want to just mention that majority of the HTML is Bootstrap 4. However, I can't seem to figure out why my logo can't be bigger, ideally the full size of the span container.

https://wiz-ed.com/

That is the link to the website in question, and you can see in the top right a very small logo image.

 <div class="container"><a class="navbar-brand py-0" href="/index.html" ><span></span></a>

This is the HTML code for the logo in question. 

.navbar-brand span {
          display: inline-block;
          min-height: 2rem;
          min-width: 9rem;
          background-repeat: no-repeat;
          background-size: auto 100%
}

.navbar-light .navbar-brand span {
          background-image: url("/images/wized-logo-black.png");
          max-width:100%;
          height:auto;

}

And this is the CSS for the logo section in question. I am truly stumped and thought I would ask this wonderful community for some guidance. Any advice would be greatly appreciated. Thank you again and happy holidays! :)

With warm regards, Luka S.

1 Answer

Andrew Birt
Andrew Birt
8,143 Points
Andrew Birt
Andrew Birt
8,143 Points

I tried this and it worked fine for me. Mainly the background-position: center and background-size: cover is what you need but the extra height fit the whole logo in there.

.navbar-brand span {
    display: inline-block;
    min-height: 2.5rem;
    min-width: 9rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}