title: CSS - how to render buttons on top of a background image?
body: <p>Hello Stack Overflow,</p>
  <p>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.</p>
  <p>This is what it looks like with standard layout: <a href="https://imgur.com/a/IzKLUI7" rel="nofollow noreferrer">https://imgur.com/a/IzKLUI7</a></p>
  <p>This is what it looks like if I play with the aspect ratio: <a href="https://imgur.com/a/TqZkAsA" rel="nofollow noreferrer">https://imgur.com/a/TqZkAsA</a></p>
  <p>Edit: This is a link to a codesandbox which has a rendition of the latest design I was working with: <a href="https://codesandbox.io/s/keen-rgb-do24t" rel="nofollow noreferrer">https://codesandbox.io/s/keen-rgb-do24t</a>.</p>
  <p>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.</p>
  <p>Application:</p>
  <pre><code>import React, { Component } from 'react';
  import './Home.css'
  
  class Home extends Component    {
      render()    {
          return (
             &lt;div className=&quot;container&quot;&gt;
                  &lt;div className=&quot;box-one&quot;&gt;
                      &lt;button className=&quot;button&quot;&gt; Image One &lt;/button&gt;
                      &lt;button className=&quot;button2&quot;&gt; Image Two &lt;/button&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
          );
      }
  }
   
  export default Home;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.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%;
  }
  </code></pre>