How to place a button over an image

Hi, I want to place a button over an image. for some reason it is not happening, the button is jumping all over the place except where I need it to be. I get that objects need to be relative and absolute but in my search on Google I found several items solving this with a transform function (which I do not understand at all)? Can anyone help me out? I am already looking for this for 5 hours… thank you so much! (any tips on how to make better buttons are very much appreciated!)

thank you
regards Tim

to create the image and button I used the following code in HTML:

Foto niet beschikbaar Ontdek onze taarten

And I tried to style the button in CSS:

.bannerfoto {
width: 100%;
height: auto;
.banner {
position: relative;
.bannerbutton {
position: absolute;
top: 50%;
bottom: 50%;
background-color: #323031;
color: white;
font-size: 16px;
padding: 12px 24px;
border: white 1px solid;
cursor: pointer;
border-radius: 5px;
.banner .bannerbutton:hover {
background-color: #ecca83;
color: #323031;

Check out this page.

Basically you can do transform: translate(x,y). A translation is just sliding an element across the screen. No change in shape or orientation. x is just how many pixes you want it to move horizontally, and y is the number of pixels you want it to move vertically.

I’m pretty sure when you use position: absolute;, it changes how percentages are used relative to its parent element. You could try using pixels, or vh and vw so see if that works any better.

And what about using background-image?

<div class="banner">
    <button class="banner-button">
.banner {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-content: center;
  background-image: url("yourphoto.jpg";
etc. etc.

For some reason it is not possible to do this properly with an image in HTML, if I used a background image in CSS and set the dimensions, this was perfectly possible with the translate tool.

thank you so much for your help!