Search code examples
javascriptjqueryhtmlcssmaterialize

Parallax image shows at top of page on load

For some reason I am having this weird CSS issue but I have no idea on how to fix it. I'm using the Materialize CSS framework. When the page loads, the parallax element appears on top of the page, strangely. It disappears when the user scrolls. Here's a picture of what I mean:

https://i.sstatic.net/ExRPq.png

Any ideas? Here's the code:

  .main-container {
      height: 88vh;
      width: 100%;
      padding: 0;
      margin: 0;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 200;
      font-family: Lato;
  }

  .main-container h1 {
    margin-bottom: -5px;
    margin-top: -15px;
  }

  .main-container h5 {
    margin-bottom: 20px;
    font-family: Roboto;
    font-weight: 200;
  }
  #search-box {
    height: 50px;
    width: 500px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    resize: none;
  }

  @media screen and (max-width: 799px) {
      .parallax-dsp {display: none}
  }

And here's the HTML:

<nav class=" yellow darken-4" role="navigation">
  <div class="container">
    <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">mxious</a>
      <ul id="nav-mobile" class="right side-nav">
        <li><a href="#"><b>Sign in</b> or <b>register &raquo;</b></a></li>
      </ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </div>
  </div>
</nav>

<div class="main-container">
<div class="parallax parallax-dsp"><img class="parallax-dsp" src="https://ununsplash.imgix.net/36/X7L5hgFXQZazzPaK3goC_14084990857_88cabf3b6d_o.jpg?q=75&fm=jpg&s=d8812b80a08b8a04f4cf538f69a13b37"></div>
  <h1>welcome to <logo></logo></h1>
  <h5>Mxious is a social music discovery engine.</h5>
  <input id="search-box" placeholder="type an artist, song, or album name to begin">

Thanks in advance!

Solution

  • From your picture, I assume you want the parralax image to be right below the nav right?… which I think is fixed. Well, just do a margin-top: to the main-container, and it will put it right below the nav.

    Another way could be adding a new div class="top-fill" above main-container and make it the height of nav.

    Edit: Looks like I haven't answered all your question, but I haven't worked with that framework, neither too much with parralax, so I don't know how to fix the dissapearing issue.