CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Karan Joisher
Karan Joisher

Reputation: 331

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

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;
}

Upvotes: 2

Views: 844

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

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>

Upvotes: 1

Related Questions