How to superimpose a text contained within the system of Materialize columns

0

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.

    
asked by JulianProg 29.04.2018 в 02:34
source

1 answer

0
<div style="position:absolute; top:15%; z-index:1;">
  <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>
</div>

This way you have to place yourself above the image, try and comment.

    
answered by 29.04.2018 в 05:21