How to place the text in front of my image

Question

I am a beginner in coding and I want to place the text in front of the picture. I am using Komodo.

enter image description here

Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. POST CODE not PICTURES of code — mplungjan, Mar 27 '20 at 07:24
Just click edit, then the `[<>]` snippet editor button and paste your code into the panes. Get an image from placeholder.com — mplungjan, Mar 27 '20 at 07:24
You also need to always use `https:// ` in links (or http:// if they use that) — mplungjan, Mar 27 '20 at 07:28

score 0 · Answer 1 · answered Mar 27 '20 at 07:32

you can do like this:

div#container {
  position: relative;
}

div#container img {
  width: 100vw;
}

div#container p {
  position: absolute;
  font-size: 30px;
  color: #fff;
  z-index: 10;
  top: 10px;
  left: 10px
}

<div id="container">
  <img src="https://wallpapershome.com/images/wallpapers/love-image-2560x1440-8k-21488.jpg" alt="test_img" />
  
  <p> You can put your text here like this ! </p>

<div>

How to place the text in front of my image

1 Answers1