Use HTML <img> tag as background image instead of CSS background image property?
I need to use html tag <img>
as background image for <div>
. Then I will post the <p>
content. I've tried this but can't seem to be able to display them correctly. I used relative position, 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 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>
+3
source to share
1 answer
To make an almost perfect duplicate of the functions used for the background image, we must consider the possibilities of img
include:
- It has no pointer events.
- It rendered at least one layer below
div
.
The result would be something like this jsfiddle :
div {
display: inline-block;
overflow: hidden;
position: relative;
width: 100%;
}
img {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
You can change the width and height according to your needs.
+3
source to share