How do I overlay a div on an empty div containing a background image?

Question

I want the #intro div to appear on the .backgroundimg div. I tried various ways like using z-index, positioning but nothing worked. Please help me with a solution and explain how it works.

Html

<div class='backgroundimg'></div>

<div id='#intro'>
      <p>
       random content
      </p>
</div>

css

.backgroundimg {
  background-image: url("http://s9.postimg.org/7c2rqzb2n/homeback.jpg");
  height: 400px;
  width:100%;
  background-size:cover;
}

Answer 1

you want something like this ?? If yes, I will explain it in comment section :)

 .backgroundimg { position: relative; background-image: url("http://s9.postimg.org/7c2rqzb2n/homeback.jpg"); height: 400px; width: 100%; background-size: cover; display: table; } #intro { positon: absolute; display: table-cell; vertical-align: middle; text-align: center; } p { color: yellow; font-size: 50px; }

 <div class='backgroundimg'> <div id='intro'> <p> random content </p> </div> </div>