CODEWITHSUNDEEP
javascripthtmlcss
user11891192
user11891192

Reputation:

Adding text onto image

I currently have code which contains a form that produces a value whenever text is submitted, the value appears on the webpage. My issue is that once submitted, I would like for the value to appear on an image above the text field..

Here is my javascript code

var list = document.querySelector('ul');
  var input = document.querySelector('input');
  var button = document.querySelector('button');
  button.onclick = function() {
    var myItem = input.value;
    input.value = '';
    var listItem = document.createElement('li');
    var listText = document.createElement('span');
    var listBtn = document.createElement('button');
    listItem.appendChild(listText);
    listText.textContent = myItem;
    listItem.appendChild(listBtn);
    listBtn.textContent = 'Delete';
    list.appendChild(listItem);
    listBtn.onclick = function(e) {
      list.removeChild(listItem);
    }
    input.focus();
  }

Upvotes: 0

Views: 132

Answers (2)

eboakyegyau
eboakyegyau

Reputation: 225

You can checkout this link they have an example where you can for example position a text in the center of an image https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center.

.container {
  position: relative;
}

.center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

enter image description here

Upvotes: 1

Maccy
Maccy

Reputation: 116

Be more specific while asking and share some screenshots what you want. In this case I would say you can use Position Absolute in order to overlay text on the image.

 .text_div{
    position:absolute;
    top:10%;
    left:30%;
 }

Upvotes: 0

Related Questions