How to overlay image in HTML over text in CSS

Question

I am trying to overlay two images in HTML code over text that is displayed on my webpage in CSS, what is the simplest way to accomplish this. I want these two images on top of the text that is currently on top of these images.

HTML Code:

<body>
            <img src="" id="image" style="width:270px;height:270px; position:absolute; left:2270px;top:770px;"/>
            <img src="" id="image1" style="width:270px;height:270px; position:absolute; left:30px;top:770px;"/>
    </body>

Are you trying to put the images on top of each other? Or do you have text that you what them on top of (or behind)? — Jack, Apr 07 '20 at 14:29
@jack Yes, I have text that I want them on top of, but currently the text is over the image — StackGuru, Apr 07 '20 at 14:31

MARSHMALLOW · Accepted Answer · 2020-04-07T14:41:56.850

2

Use z-index, position: relative; and position: absolute;.
Here is your HTML:

<body>
   <img src="" id="image" style="width:270px;height:270px;"/>
   <img src="" id="image1" style="width:270px;height:270px;"/>
   This is a text!
</body>

Then add CSS:

img {
   position: relative;
   z-index: 1;
}

div {
  position: absolute;
  top: 0px; //To see the difference
}

CodePen: https://codepen.io/marchmello/pen/ExjqGYQ

edited Apr 07 '20 at 14:41

answered Apr 07 '20 at 14:34

MARSHMALLOW

1,315
2
12
24

Awesome! Thank you @MARSHMALLOW This worked perfect – StackGuru Apr 07 '20 at 14:36

score 2 · Answer 2 · answered Apr 07 '20 at 14:35

2

You should use z-index for overlaying text and images:

img {
  position: absolute;
  z-index: 2;
  width: 200px;
}

div {
  position: relative;
  z-index: 1;
  color: black;
}

<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<div>This is text over the image that goes on for a while</div>

answered Apr 07 '20 at 14:35

Jack

1,893
1
11
28

Thank you! This helped alot – StackGuru Apr 07 '20 at 14:37

How to overlay image in HTML over text in CSS

2 Answers2