How to make Jarallax MDB work?

Question

I have the following code:

<div class="view jarallax" data-jarallax = '{"speed":0.2 }' style="background- 
image: url('OFP/OFP_Group.jpg'); background-repeat: no-repeat; background- 
size: cover; background-position: center center;">
<div class="mask flex-center rgba-black-light"></div>
</div>

And for some reason, I cannot make it work as shown in the MDB example (https://mdbootstrap.com/previews/docs/latest/html/parallax/index.html). The image doesn't show up at all, if I add the width to the style, it shows the image, however the image doesn't have the jarallax effect. What am I doing wrong?

Answer 1

I had the same issue and it seems the problem was in my own ignorance. There is a snippet of CSS code in the Parallax Intro section. Put that in your blank style.css file and it should work fine. Below is the code you should put in your CSS file

/* Required for full background image */

html,
body,
header,
.jarallax {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .jarallax {
    height: 100vh;
  }
}

.top-nav-collapse {
  background-color: #82b1ff !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background: #82b1ff !important;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background: #82b1ff !important;
  }
}

h5 {
  letter-spacing: 3px;
}