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.