How to put a button on top of an image?

Asked

Viewed 2,768 times

1

I have the following image below:

inserir a descrição da imagem aqui

I need to include a button on top of it using CSS, like this:

inserir a descrição da imagem aqui

Source code:

<div id="exampleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

      <img src="https://progetex.com.br/uf/popup1.png" style="max-width:100%"/>

    </div>
  </div>
</div>

But I can’t use the image of background of div because I need the dimensions of it (when I used it as a background, the div didn’t appear since there was no content inside).

Any hint?

css
  • 1

    Yes. Use position: Absolute on button and bottom: Tantospx and left: Tantospx

  • 1

    But it would be good to put the code of all this so we can give an accurate answer.

  • @dvd included the code, is a piece of a modal of boostrap. I’ll see if I can put the button using position.

  • @dvd worked using position. thanks

1 answer

2


As discussed in the comments, position the button with position: absolute;:

botao{
   position: absolute;
   left: VALORpx;
   bottom: VALORpx
}

Replace "VALUE" with numbers where the button is in the desired position. Also swap the "button" selector with the id, class or tag of the element.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.