I have 2 divs that overlap when re-sizing browser

As you can see, I have the image set to responsive so it stretches accordingly when re-sizing the browser, so the image fits and keeps its ratio. That's how I want it. What I don't want is the music player to overlap with the image.

I'd also like to keep their position the way they are, centered, and next to each other.

I tried to search for a solution but everything I found was in different conditions and didn't help. I'm sure this is a stupid simple fix, I just can't wrap my head around it. http://jsfiddle.net/6ML3s/

HTML

<body>

<img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false"/>

<div class="player"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" /></div>

</body>

CSS

body {
    background-color:#B1ACA9;
}
.bg {
    height:91%;
    position: absolute;
    bottom: 0;
    right: 25%;
    z-index: -1;
}
.player {
    position:absolute;
    top:50%;
    left:40%;
    z-index:99999;
}

Solution

Try this: http://jsfiddle.net/lotusgodkk/6ML3s/2/

HTML:

<div class="container">
    <div>
        <img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false" />
    </div>
    <div class="player">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" />
    </div>
</div>

CSS:

.container {
    width:100%;
    height:300px;
    display:table;
}
.container div {
    display:table-cell;
    width:49%;
    vertical-align:middle;
}
.container div img {
    max-width:100%;
}

Wrapped your code in a div and the image in a div. I used width:49% but you can adjust according to your use and requirements.