How can I keep pixel size in alignment at different widths on this scrolling site made with SVGs?

(Pre-posting update to my question: I figured it out before posting, but am posting anyways for the public's information-- even though this is pretty obscure stuff.)

I'm working on a new scrolling site for a game here's the working page: http://pman.mindevo.com/

I have been able to get all the backgrounds matched up and scrolling together for a parallax effect, but now I'm working on getting an animation that moves across the screen (eventually I'll work more on using SVG sprites to actually have the character animated), but I can't seem to get the pixel sizes to match up properly.

My latest and best working solution so far is to make the SVG the same height as the rest of the background images. The problem I'm having is at different browser widths the character's 'pixels' (I use this term loosely because it's vector) do not match up with the background's 'pixels'.

Does anyone have any suggestions in keeping him the same pixel-by-pixel size as the backgrounds at different browser widths?

Here's some information about the background SVGs (the SVG open tag):

This is one of the tree background parallax layers:

<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">

Here's the character's ('Potatoman') svg header:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">

Originally it was embedded in the page as just an <img> by itself. Like so:

<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
  <h2> Some dialogue and potatoman animation happens in this section</h2>
    <img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>

With the CSS like so:

#theMan {
  position:absolute;
  left: 0;
  bottom:1.3em;
  height:100%;
  width:4%;
}

I had trouble getting it spaced properly vertically once it changed width.

Now that you've read this post, I figured out while doing it just how to make it work. If anyone has better ideas I will accept them as well. Otherwise I'm going to post my own answer to this question as I figured it out, but if anyone else is every working with Pixel graphics and wants to do what I'm doing, they have all the information right here.

Solution

So Here's how I had to change things around. First I removed the width property on the image (#theMan) and let it fall back to my basic img CSS like so

#theMan {
  bottom:0;
  height:100%;
  left: 0;
  position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}

Then I had to change my data attributes to manipulate the browser wide and browser high img to this:

  <img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">

Since the image ended up centered in the page because it's width became 100%, shifting the entire image only 50% instead of 100% worked out, now when it scales it scales at the same rate as the background images as it's the same dimensions.