Position text over image in html without putting the image as background

Question

I've the code below

    <img src="../../1021.png" alt class="img img-fluid">
  </div>

i want to write some text and input field over this image without putting it as a background for some reasons , can that be done anyway ?

it just doesn't work for me and when i give it fixed width it becomes not responsive — Ayman Tarig, Mar 24 '19 at 15:05
Well, You can achieve responsivness with background-image as well — Varit J Patel, Mar 24 '19 at 15:07

score 1 · Answer 1 · answered Mar 24 '19 at 15:24

I just create a basic text overlapping code. I hope it'll help you out. Thanks

.parent-class {
 position: relative;
}

.content-class {
 background-color: #fff;
 position: absolute;
 top: 20px;
 left: 20px;
 padding: 10px;
}

.content-class h1,
.content-class p {
  margin: 0;
}

<div class="parent-class">
 <div class="content-class">
  <h1>Hello World!</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </div>
 <img src="https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg" alt class="img img-fluid">
</div>

score 0 · Answer 2 · answered Mar 24 '19 at 15:23

You can use the absolute positioning for the text. In essence something like this:

<div class="wrapper">
  <img src="../../1021.png" alt class="img img-fluid">
  <div class="text">Here is your text</div>
</div>

And the CSS:

.wrapper {
  position: relative;
  width: 100%;
}

.wrapper img {
  position: relative;
  z-index: 0;
}

.wrapper .text {
  position: absolute;
  z-index: 10;
  bottom: 0;
}

Adjust to your needs. The principle is that your text & image elements are both contained within a wrapper, which must be of a relative position so that you can then alter the absolute positioned text in relation to the wrapper. Also pay attention to the z-indexing to ensure the text is on top of the image.

Position text over image in html without putting the image as background

2 Answers2