[Dinocanid]

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:




I currently have my css like this:

.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.