Use the HTML <img> tag as a background image instead of the CSS background-image property?

Question

I need to use the html <img> tag as a background image for a <div>. I will then be placing a <p> of content over this. I've tried this but cant seem to get them to display correctly. I've used position relative, margin with negative values.

Any suggestions or point me in the right direction would be appreciated.

<div>

  <img src="http://www.shiaupload.ir/images/77810787432153420049.png" />

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
  </p>

</div>

Answer 1

To make an almost perfectly duplicate of the features used for background-image, we've to consider the features of the img include:

• It doesn't have any pointer events.
• It's rendered at least one layer below the div.

The result would be something like this:

div {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

p {
  padding: 25px;
}

<div>
  <img src="http://via.placeholder.com/720x480/ddd/007" />
  <p>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book
  </p>
</div>

You might modify the width and height to your needs.