Full screen image using Materialize’s Parallax

Asked

Viewed 201 times

0

I’m starting with Materialize, and I’m having a doubt.

How to leave the background image of parallax?

Currently, the function image is in the middle of the screen.

CSS

<style>
    .parallax-container {
        height: 100%;
    }
</style>

BUDDY

<div class="parallax-container">
    <div class="parallax"><img src="bg.png"></div>
    <nav>
        <div class="nav-wrapper teal darken-4">
            <a href="#" class="brand-logo center">Logo</a>
        </div>
    </nav>
</div>

SCRIPT

<script>
    $(document).ready(function(){
        $('.parallax').parallax();
    });
</script>
jquery css html5 css3 materialize

2 answers

0

Separate your code and put it in this order like this in the sample templates on api of materialize:

Example Parallax.

<nav>
  <div class="nav-wrapper teal darken-4">
    <a href="#" class="brand-logo center">Logo</a>
  </div>
</nav>
<div class="parallax-container">
  <div class="parallax">
    <img src="bg.png">
  </div>
</div>

Check if your image is in the pattern of his models, 1440x743 but this is not a rule, just need a large image!

If the Styles in the head tag and the js scripts are in the right place everything should work.

0

For your particular case I suggest putting the height of the container Parallax with 100vh, for VH is related to Viewport, in which case it is 100% of the height.

inserir a descrição da imagem aqui

Follow the image code above

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .parallax-container {
            position: relative;
            overflow: hidden;
            height: 100vh;
        }
    </style>
</head>

<body>

    <div class="parallax-container">
        <div class="parallax">
            <img src="https://picsum.photos/200/300?grayscale">
        </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="row container">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex vero aspernatur in nobis, a dolor quo eaque
            corrupti dolorem, quas tenetur dignissimos, ipsa illo quis facere saepe voluptatibus vel id consequuntur
            optio laudantium fugit numquam suscipit. Neque, at accusamus, obcaecati quas, dolores quisquam maxime
            maiores dignissimos sunt molestiae error itaque debitis quasi perferendis sequi accusantium recusandae
            pariatur architecto unde! Sunt ipsam veniam libero mollitia, debitis at ipsum vel eum totam quae
            necessitatibus quas deleniti et exercitationem iusto alias saepe sapiente suscipit voluptatibus esse illum,
            asperiores consequatur, similique expedita? Eaque consectetur dolores est fuga repellat, inventore aliquid
            ex fugit quae corporis.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex vero aspernatur in nobis, a dolor quo eaque
            corrupti dolorem, quas tenetur dignissimos, ipsa illo quis facere saepe voluptatibus vel id consequuntur
            optio laudantium fugit numquam suscipit. Neque, at accusamus, obcaecati quas, dolores quisquam maxime
            maiores dignissimos sunt molestiae error itaque debitis quasi perferendis sequi accusantium recusandae
            pariatur architecto unde! Sunt ipsam veniam libero mollitia, debitis at ipsum vel eum totam quae
            necessitatibus quas deleniti et exercitationem iusto alias saepe sapiente suscipit voluptatibus esse illum,
            asperiores consequatur, similique expedita? Eaque consectetur dolores est fuga repellat, inventore aliquid
            ex fugit quae corporis.</p>
    </div>



    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.parallax').parallax();
        });
    </script>

</body>

</html>

To learn more about this unit of measurement read here What are the differences between the "vw", "em" and "%"?

Browser other questions tagged jquery css html5 css3 materialize

You are not signed in. Login or sign up in order to post.