0

Im using Materialize CSS and im trying to use the Parallax.

I followed the instructions: http://materializecss.com/parallax.html

But when i save, no image is shown.

Here is the codepen: https://codepen.io/wecarrasco/pen/qmxMox

    <div class="parallax-container">
    <div class="parallax"><img src="http://www.mrwallpaper.com/wallpapers/landscape-georgia.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="\wecarrasco.github.io/computer.jpg"></div>
  </div>

And the script:

<script>
    $(document).ready(function(){
      $('.parallax').parallax();
    });
</script>

Thanks!

Walther Emilio Carrasco
  • 19
  • 1
  • 5
  • Does this answer your question? [Parallax not working in materialize css](https://stackoverflow.com/questions/31232539/parallax-not-working-in-materialize-css) – mufazmi Dec 02 '19 at 02:43

3 Answers3

2

I had the same issue and the only fix was that I had was to add a z-index: X; with X being a number higher then the surround div elements z-index so I set to 15 to the parallax div, so my finishing div was this

<div class="parallax-container">
    <div class="parallax" style="z-index: 15;">
        <img src="img/profile2.jpg">
    </div>
</div>

Which worked for me.

Teobot
  • 189
  • 2
  • 2
  • 14
1

The images are working fine now. Here is the link to my demo, which i forked from yours https://codepen.io/nirajtech/pen/jmKNpr

The problem was you didn't include the two js file required to trigger the parallax. first one jquery and second is materialize.js

The link of both js is provided below:

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

  2. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js

Remeber to include jquery first and then materialize otherwise you will face problem.

Niraj
  • 602
  • 2
  • 7
  • 12
0

This made my image appear I inspected the demo in the documentation in chrome

<div class="parallax"><img src="images/cow.jpg" style="transform: translate3d(-50%, 432.451px, 0px);opacity: 1;"></div>

Ray Zion
  • 610
  • 10
  • 11