Parallax not working in materialize css

18,407

Solution 1

Look my example: http://jsfiddle.net/yhgj48tr/

Do not forget to initialize it:

$(document).ready(function(){
  $('.parallax').parallax();
});

Solution 2

For me helped adding to style sheets

.parallax{
  position:static;
}

because before it was on "absolute" and it spoiled parallax :)

Share:
18,407
Mike
Author by

Mike

Updated on June 16, 2022

Comments

  • Mike
    Mike almost 2 years

    I am using the Materialize Framework to create a PhoneGap app.

    http://materializecss.com

    They have a parallax setting which you can see their notation here:

    http://materializecss.com/parallax.html

    When I run it, my image does not show up at all. My html looks like this:

    <div class="row">
      <div class="col s12 m7">
        <div class="card">
    
          <div class="parallax-container" style = "height:100px;">
            <div class="parallax"><img src="/img.png"></div>
          </div>
    
          <div class="card-content">
            <h5> test</h5>
            <h6> test</h6>
            <h6> test </h6>
            </br>
            <p> test</p>
          </div>
    
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
    
        </div>
      </div>
    </div>