Overflow logo outside navigation bar

Question

I tried overflow-y: visible in css, but the logo is still shrinking, I think this has something to do with the body, as on all other pages the logo shows how I want.

 <div class="nav-logo">
 <img class="lightup-logo" src="image/logo.png" alt=""/>
</div>
    .nav-logo {
  float: left;
  overflow-y: visible;
  width: 24%;
  padding: 0px;
  margin: 0px;
  }

On the other hand, the logo works as intended on all other pages; it overflows very well, just on the index page, which seems like a problem.

For those who are looking for a complete sample code.

    <header>
    <div class="header-container">
      <div class="nav-logo">
         <img class="lightup-logo" src="image/logo.png" alt=""/>
        </div>
    </div>
    </header>
    <main>
    <div class="body-container">
    <div class="large-container"></div>
    <div class="clear"></div>
    </div>
    </main>



header {
    padding: 0px;
    margin: 0px;
    background: rgba(31,34,36,1);
background: -moz-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,34,36,1)), color-stop(25%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), color-stop(77%, rgba(0,0,0,1)), color-stop(100%, rgba(31,34,36,1)));
background: -webkit-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -o-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -ms-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: linear-gradient(to right, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2224', endColorstr='#1f2224', GradientType=1 );   
}
.nav-logo {
      float: left;
      overflow-y: visible;
      width: 230px;
      height: 100%;
      width: 24%;
      padding: 0px;
      margin: 0px;
  }
.header-container {
    max-width: 1000px;
    margin: auto;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid transparent;
    -webkit-border-image: url(/border.png) 28 stretch; /* Safari 3.1-5 */
    -o-border-image: url(/border.png) 28 stretch; /* Opera 11-12.1 */
    border-image: url(/border.png) 28 stretch;

}
main {
    margin: 0px;
    padding: 0px;
}
 .large-container {
      height: 478px;
      background-image: url(../image/sliced1.png);
  }
.body-container {
    margin: auto;
    max-width: 1000px;
    position: relative;
}

If I add z-index: -1 to the body-container, I get the result I want (logo overflow), however the links in the body containers no longer work.

Answer 1

• screen_styles.css, line 48, z-index: 5px;. z-index .
• line 14:

header {
  position: relative;
  z-index: 99;
}

. , z-index , , position:static. position, static.

, , .

Answer 2

.nav-logo img 
  {
    max-width: 100px; //width of div
    max-height: 100px;//height of div
  }

logo.png, div

<div class="nav-logo">
</div>

.nav-logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("image/logo.png");
background-repeat: no-repeat;
background-size: contain;
}

, div .