Mysidia Adoptables Support Forum - Pet background alignment issues

I have a background system on my site that semi-works right now, which still needs lots of tweaking, but I have a problem with the background going over the tables or the adopt hovering outside of the background:
http://www.clipular.com/c/4835705659...nOuGUT3127jfKo

http://www.clipular.com/c/5961605566...3LEh7EgqgFURms

I currently have my css like this:

Code:

.decor {

position: absolute;

    top: 26%;

    left: 49%;

    z-index: 1;

}

.adopt {

position: relative;

    z-index: 2;

and my code like this:

PHP Code:


		
			
$background = $adopt->getAdoptBackground();

$image = $adopt->getImage("gui");



$document->add(new Comment("<div class = 'adopt'>"));

      $document->add($image);

      

       $document->add(new Comment("<center>"));

        if ($background == ""){



        $document->add($image);

        }

      else{

      $document->add(new Comment("<div class = 'adopt'>"));

      $document->add($image);

      

        $document->add(new Comment("</div>"));

        //$document->add(new Comment("<br></br>"));

        $document->add(new Comment ("<div class='decor'><img src='{$mysidia->path->getAbsolute()}picuploads/backgrounds/{$background}.png'</div>"));

        }

        $document->add(new Comment("</center>"));

(Not the exact/full myadopts.php code, but the snippets I'm referring to)

I've done a lot of adjusting to the css, but all of my pet images are different sizes, so I can't get every one to fit correctly; unless I had separate sections in the css code for every adoptable with background issues, but I can see that getting tedious as more and more species are added. I tried not using positioning and only adjusting the z-index, but that causes the pet to appear either above, below, or beside the background, and not in it.