Not sure I know what you are asking here, but there are zoom options that you can set in Firefox (and other browsers, no doubt). For example, go to View > Zoom > Zoom Text Only to prevent Firefox increasing the size of all elements when you zoom the page.
I am now aware that I could use the div class of "wrapper" around my images in order to get it to float in the relative position of my body so that it would be centered in larger width browsers but still keep its exact position and look.
Yep, what you do is add in some CSS styles like this:
margin: 0 auto;
background: url('background.jpg') no-repeat 50% 0;
position:relative means that the absolutely positioned images within the wrapper will now be positioned in relation to the wrapper, rather than to the viewport (browser window).
margin: 0 auto means place zero margin on the top and bottom of the wrapper, and make the left and right margins auto, which means the wrapper will be centered on the page. This only works if the wrapper is given a width, hence the width setting (which is the width of the background image).
Lastly, remove the background from the body element and place it on the wrapper instead (as shown above).
Hope that helps—or at least gets you started. Post back if you have any more questions.