Here I detail my question. I'm making a web page where I have a background image but by placing a text with the system of columns (grid) that provides materialize this is below that background image and therefore can not be seen. I already tried to modify the z-index of the background image to be behind the text but it does not have any effect. It should be noted that I am with the advanced version of SAAS.
HTML code:
<div class="row left ">
<div class="col s12"><p>Blockchain</p></div>
</div>
<div class="row left ">
<div class="col s12"><p>Develop, test, and deploy secure blockchain apps </p></div>
</div>
<div class="row left">
<div class="col s12 "><p>We develop software powered by Hyperledger</p></div>
</div>
<div class="btn-down"><img src="images/down.png"/>
<div class="section1"> <h3> what is a blockchain? </h3> </br> <p> dsakkljksksdasda </p> </div>
</div>
<img class="responsive-img img-header" src="images/bg.jpg">
Unmodified SAAS code (as it comes):
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
.col {
float: left;
box-sizing: border-box;
padding: 0 $gutter-width / 2;
min-height: 1px;
}
}
This is the background image:
And here you can see the text that is below the image:
My question is because the z-index does not work ?. Any other property that you add if it takes effect, but z-index does nothing.