What are the steps to getting Jarallax MDB up and running?

This is the code I am currently working with:

<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>

Unfortunately, I am having trouble getting it to work as demonstrated in the MDB example (). The image is not showing up at all. If I include the width in the style, the image appears, but without the desired jarallax effect. Can anyone help me identify what I might be doing incorrectly?

htmlcssbootstrap-4parallaxmdbootstrap

Answer №1

After encountering a similar issue, I realized that the solution lay in my lack of knowledge. The key was a CSS snippet located in the Parallax Intro section. Simply insert this code into your empty style.css file and you should be good to go. Below is the CSS code that should be included:

/* 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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to Resolve Issues with WordPress Update and Publish Failures

It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...

phphtmlcsssqlwordpress

What is the best way to bring in an image when the resolution falls below 700 pixels?

Is there a way to import an image only if the screen resolution is greater than 700px? HTML: <picture> <img id="logo_mobile"> <!-- I have also tried this --> <source srcset="logomobile.jpg ...

htmlcss

Is it Possible to Customize the Appearance of a Broken Link Using CSS?

Can you change the color of broken links on your site to distinguish them from working ones? For example, making working links blue and broken links red. If CSS is not an option, is it possible to use JavaScript to detect broken links and style them diffe ...

javascripthtmlcss

Can you add descriptive text below a linked image?

I am currently working with a customized CMS created specifically for our company. My goal is to insert text below the image displayed. Ideally, I would like the text to be centered within the border of the image if possible. I have limitations in that I ...

htmlimage

Having trouble rendering the response text from the API fetched in Next.js on a webpage

I've written some code to back up a session border controller (SBC) and it seems to be working well based on the output from console.log. The issue I'm facing is that the response comes in as a text/ini file object and I'm unable to display ...

javascripthtmlnode.jsreactjsnext.js

Using v-model with an input file is not supported

Is there a solution for not being able to use v-model in an input tag with type="file"? Here is an example of the HTML code causing this issue: <input v-model="imageReference" type="file" name="file"/> ...

javascripthtmlvue.js

Trouble retrieving key value in HTML with Angular and Firebase

When trying to access the key of an object in my database to navigate to a URL based on it, I am finding that the p.$key value is always undefined. service: getAll(){ return this.db.list('/products').valueChanges(); } component: product ...

htmlangularfirebase-realtime-databaseangularfire2

Adjust font size using jQuery

Hey there! I have a small question. I want to resize all HTML elements using jQuery, but the current code allows me to increase and decrease the size infinitely. var originalSize = $('html').css('font-size'); // Reset ...

jqueryhtmlcssfont-size

Adjust the <div> element to dynamically resize based on the user's browser changes

I need a div to adjust its width and height dynamically based on the browser dimensions when a user resizes their browser window. Implemented code following the provided suggestions: <!DOCTYPE html> <html> <head> <link rel="s ...

cssbrowserhtmlscrollresize

Tracking the number of headings within a table using HTML

I am having trouble formatting text in a table where the second column contains text, with some rows having headings ranging from H1 to H5. I want to use auto numbering for the headings, but the increment function doesn't seem to be working within the ...

htmlcsscss-counter

Leveraging JavaScript to access the margin-top property of the HTML and body tags

I'm having trouble retrieving the "marginTop" style property from the <html> and <body> tags. While Chrome developer tools shows that margin-top is being set via in-HTML CSS: <style type="text/css" media="screen"> html { margin-top: ...

javascripthtmlcss

How to style the second child div when hovering over the first child div using makeStyles in Material UI

I am working on a web project with a parent div and two child divs. I need to apply CSS styles to the second child div when hovering over the first child div. Below is the structure of the render method. <div className={classes.parent}> <div c ...

javascriptcssreactjsmaterial-uimakestyles

Jquery panoramic slider - Dynamically adjusting image width to fit screen size

Currently, I am attempting to implement a popular panning slider called Jquery Panning Slider for a website. The details regarding the markup structure, CSS, and jQuery can be found here: Slider Details. However, I encountered an issue with this slider. ...

jquerycssjquery-pluginssliderfullscreen

Obtain the Encoded Data

Unfortunately, I do not have control over domain.com. However, I am able to provide a redirect URL parameter like the one shown below: www.domain.com?retUrl=www.example.com%3Fparameter%3Dvalue Following the provision of retURL (www.example.com?parameter= ...

javascripthtmlsalesforceapex-codeurldecode

Incorporating descriptions below the images within this JavaScript carousel

I'm struggling to add text under the images in this slider. The functionality is simple, but I can't figure it out. I might have to rewrite it. Here's the HTML and JS: <div id="look-book-scroll"> <a href="javascript:;" id="lookbo ...

javascriptjqueryhtmlcssfrontend

Implementing a background image layered over a background color using CSS

Currently, I am in the process of converting a webpage from PSD format. The main content of the page is designed with a solid background color, but there is also a separate layer that features a glow effect on top of the background. However, when implement ...

htmlcssbackgroundpsd

Angular Material has support for displaying nested optgroups within select components

Upon reviewing a question on Stack Overflow, I learned that nested optgroups are not supported in the HTML5 spec. While it is possible to manually style them, I am curious if Angular Material offers a solution. Angular Material internally swaps many eleme ...

javascripthtmlcssangularjsangular-material

Having trouble retrieving my .scss bundle file from a different directory

I am trying to access my .scss file that imports all the other .scss files (they are all imported in styles.scss). Even though I have added the path to my angular cli file, the file is still not accessible and no styling is being applied to my html elemen ...

cssnode.jsangularsassangular-cli

The specified selector is invalid or illegal in HTMLUnit

Attempting to mimic a login using htmlunit has presented me with an issue despite following examples. The console messages I have gathered are as follows: runtimeError: message=[An invalid or illegal selector was specified (selector: '*,:x' erro ...

javajavascriptcsshtmlunitweb-crawler

Gradient background overlaid with a blended SVG shape

Creating a full gradient background with a clipping mask can be tricky. I used an SVG to achieve the desired shape by cutting part of the background color, but now I'm facing a challenge with blending the colors seamlessly. I tried setting the SVG co ...

htmlcsssvg