How do I keep my images from shifting when zooming in and out?

Question

(Note, we are still new to web development, and I have only just joined the team to help and therefore don't know the exacts of the html code)

I've attempted to look on stackoverflow for similar questions, but not of the people have the exact same issue. I am attempting to help a team out with their web development. One issue they are having is the the images won't remain within their respective bubbles (see image) when a user zooms in or out. Here is the website: http://2016.igem.org/Team:Rice

Here is an example of some of the markup that is responsible for the images:

                <div>
                <img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
                 style="float:center;position:relative;left:50%">

                <img id = bubble                 
                src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px  
                style ="position:absolute;left:64.1%;top:35.3%"> 
                </div>

The first picture is the Purple bubble, and it would be ideal to have the "bubble" images to be within the burble circles; and it would be nice if they would stay in the circles, regardless of zooming or differences in resolution.

What I've tried: I've tried to change the position attributes but this didn't seem to do much. I've also tried to change the percentages to pixels. While this worked by keeping the images still while I zoomed in and out, the pictures still were screwed when I checked on another computer with a different resolution.

Answer 1

I ended up changing the div element to be position: absolute

             <div sytle = "position: absolute">

             <img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
             style="float:center;position:relative;left:50%">

            <img id = bubble                 
            src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px  
            style ="position:absolute;left:64.1%;top:35.3%"> 
            </div>

So far this seems to do the trick

Answer 2

You need to use position:absolute on the background image.