Parallax Image Does Not Fill Width - Materialize

I had a problem when the image remains on the left, I already initialized it in js, I tried to resize the image, use different browsers, and it has the same result. Can someone help me in solving this?

HTML

<nav class="#607d8b blue-grey"> <div class="nav-wrapper container"> <!-- <a href="#!" class="brand-logo">Interaq</a>--> <ul class="left hide-on-med-and-down"> <li><a href="#">HOME</a></li> <li><a href="#">GAMELIST</a></li> <li><a href="#">REVIEWS</a></li> <li><a href="#">NEWS</a></li> <!-- Dropdown Trigger --> <!-- <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>--> </ul> <!--Search bar--> <form class="right hide-on-med-and-down"> <div class="input-field"> <input id="search" type="search" required> <label for="search"><i class="material-icons">search</i></label> <i class="material-icons">close</i> </div> </form> </div> </nav> <div class="parallax-container"> <div class="parallax"><img src="<?php echo base_url();?>materialize/img/banner1.jpg"></div> </div> 

Result

enter image description here

+5
source share
4 answers

Try it. The error was equal to the sign after the width property in the response of Crushio Vida.

 <div style="width:100%;" class="parallax-container"> <div class="parallax"> <img src="<?php echo base_url();>materialize/img/banner1.jpg"> </div> </div> 

Here is jsfiddle

+2
source

Try setting the width style to 100% directly in divs, for example.

 <div style="width:100%" class="parallax-container"> <div style="width:100%" class="parallax"><img style="width=100%" src="<?php echo base_url();?>materialize/img/banner1.jpg"></div> </div> 
+2
source

You must make your image responsive with class = "responsive-img"

 <img class="responsive-img" alt="parallax" src={img} /> 
0
source

float: right applies to the form instead of the input field.

  <form class="right hide-on-med-and-down"> <div class="input-field"> 

Change it to

 <form class="hide-on-med-and-down"> <div class="input-field right"> 

Materialize Css Parallax Codepen

0
source

Source: https://habr.com/ru/post/1243604/


All Articles