Add a text to input type image

Vika 0
Viewed 32

I am using an input type image inside a div container. The image is a button. I would like to add text to this image in the center from the indentation of Left to Right. I am unable to get around it. Is the text hidden behind the image or is not at all getting displayed?

  .container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }

  .container>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


  .button {
    position: absolute;
    left: 0%;
    top: 50%;
    margin: auto;
    transform: translateY(-50%);
    height: 50%;
    width: 50%;
    overflow: hidden;
    z-index: 2;
    display: block;
  }
</style>
<div class="container">
    <input type="image" class="button submit" src="https://picsum.photos/200" alt="submit" value="This is my text"/>
 </div>

css html
1 Answers

Here is a similar structure using an img tag as a background with object-fit to make it cover the entire element AND a inner div positioned in front of the img and using display: flex; to center the content of the inner div.

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  color: red;
}

.container__image,
.container__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container__image {
  object-fit: cover;
}

.container__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
<div class="container">
  <img class="container__image" src="https://picsum.photos/800" alt="image placeholder"/>
  <div class="container__inner">
    <p>This is my text.</p>
  </div>
</div>

dylanjameswagner0
Related