CSS - how to render buttons on top of a background image?

Question

Hello Stack Overflow,

I'm currently working on building a component that will have a background-image, and on this background-image I want to render buttons exactly over a certain section of the background image. My intention is to make this resizeable - the buttons should stay over a certain area despite the aspect ratio.

This is what it looks like with standard layout: https://imgur.com/a/IzKLUI7

This is what it looks like if I play with the aspect ratio: https://imgur.com/a/TqZkAsA

Edit: This is a link to a codesandbox which has a rendition of the latest design I was working with: https://codesandbox.io/s/keen-rgb-do24t .

Is it possible that whenever I resize the aspect ratio of the page, I will still have those buttons over the certain area of the background image? If I resize the window, I notice that the buttons will fly off the background image. I've attached my code below.

Application:

import React, { Component } from 'react';
import './Home.css'

class Home extends Component    {
    render()    {
        return (
           <div className="container">
                <div className="box-one">
                    <button className="button"> Image One </button>
                    <button className="button2"> Image Two </button>
                </div>
           </div>
        );
    }
}
 
export default Home;

CSS:

.container {
  background-image: url(../components/space_wallpaper.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  left: 10vw;
  top: 10vh;
  height: 80vh;
  width: 80vw;
  outline: 1px solid blue;
}

.box-one {
  outline: 1px solid red;
  display: flex;
}

.button {
  position: absolute;
  margin: 1% 1%;
}

.button2  {
  position: absolute;
  margin: 50% 50%;
}

Answer 1

Is this what you are looking for?

.container {
  background-image: url(../components/space_wallpaper.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  left: 10vw;
  top: 10vh;
  height: 80vh;
  width: 80vw;
  outline: 1px solid blue;
}

.box-one {
  outline: 1px solid red;
  display: flex;
}