Sticky Div Position Using CSS

Question

I am trying to create a digital drumset. I have an image of a drumset and I want to place round hit pads on each drum. I am having trouble keeping the hit pads in place when I change the view size. I tried using bootstrap to keep the divs in place, but I discovered that won't work because resizing just stacks the hit pads along the left. Is there any way to keep the hitpads in place using CSS on top of the drumset background image as the view size changes? Below is my current HTML and an image of the drumset I am trying to place the hitpads on. Thank you in advance for any help!

   <div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <img id="playboard" src="drums.png" alt="">
                <div class="row" style="height: 100px">
                </div>
            <div class="row" style="height: 50px">
            </div>
            <div class="row" style="height: 50px">
            </div>
            <div class="row" style="height: 50px">
                <div class="col-md-4 col-sm-4">
                    <button class="hit hihathit animated pulse infinite" ng-audio="hihat.mp3" start="0.1"></button>
                </div>
                <div class="col-md-4 col-sm-4">
                    <button class="hit crashhit animated pulse infinite" ng-audio="crash.mp3" start="0.1"></button>
                </div>
                <div class="col-md-4 col-sm-4">
                    <button class="hit ridehit animated pulse infinite" ng-audio="ride.mp3" start="0.1"></button>
                </div>
            </div>
            <div class="row" style="height: 50px">
                <div class="col-md-6 col-sm-6">
                    <button class="hit tomonehit animated pulse infinite" ng-audio="tomone.mp3" start="0.1"></button>
                </div>
                <div class="col-md-6 col-sm-6">
                    <button class="hit tomtwohit animated pulse infinite" ng-audio="tomtwo.mp3" start="0.1"></button>
                </div>
            </div>
            <div class="row" style="height: 50px">
            </div>
            <div class="row" style="height: 50px">
                <div class="col-md-4 col-sm-4">
                    <button class="hit snarehit animated pulse infinite" ng-audio="snare.mp3" start="0.1"></button>
                </div>
                <div class="col-md-4 col-sm-4">
                    <button class="hit kickhit animated pulse infinite" ng-audio="kickdrum.mp3" start="0.1"></button>
                </div>
                <div class="col-md-4 col-sm-4">
                    <button class="hit floortomhit animated pulse infinite" ng-audio="floortom.mp3" start="0.1"></button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I figured it out. Set a container to relative. Stick an image inside with width 100% and height auto. Then set the button divs to absolute and use top, right, left, bottom to position.

Answer 2

You might try using an html table or flex-box to contain the "hit pads". If you use percentages for size values, I think you can make your hit pads scale in concert with your background image.