How do i put this text inside the image?

Question

I am having a lot of trouble putting this text blocks inside the image, I would like to put the text where the black arrow is, how could I do it, I would appreciate some help, thanks.

.bloco {
  padding-top: 10%;
}

.title {
  font-family: 'Sans', sans-serif !important;
  font-size: 50px !important;
  font-weight: 900 !important;
}

.container-fluid {
  width: 30% !important;
}

<div class="container">

  <div class="bloco">
    <center>
      <h1 class="title">404</h1>
      <img class="img-fluid" src="https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif" />
      <h3 style="postion : relative; top: 10%;">Estás Perdido?</h3>
      <p>Esta página não existe</p>
      <button class="btn-entrar container-fluid" onclick="window.location.href='{{ url()->previous() }}'">Voltar</button>
    </center>
  </div>

</div>

center tags are obsolete and should not be used - use text-align center on bloco instead. also why not use the image as a background image if you want the txet to be on top of it? — Pete, Oct 07 '20 at 14:03
first thing!. You have written wrong spelling of position in H3 tag. try css: h3 { position: absolute; margin-top: -10%;} — Chandrapal Chetan, Oct 07 '20 at 14:51

score 0 · Accepted Answer · answered Oct 07 '20 at 14:01

0

Try like this

h3{
    position: absolute;
    top: -10%;
}

answered Oct 07 '20 at 14:01

Great Coder

397
3
14

score 0 · Answer 2 · answered Oct 07 '20 at 14:10

   <div class="container">
      <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
      <div class="bottom-left">Bottom Left</div>
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>
      <div class="centered">Centered</div>
    </div>
    
    /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

How do i put this text inside the image?

2 Answers2