Pet background alignment issues

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

[Silver_Brick]

I will fix it today or tommorow for you :)

[Abronsyth]

...but all of my pet images are different sizes...

My answer to this on my website was to take the largest pet image and scale the backgrounds to that pet, so that way each background will fit all pets. Then, instead of having the background and pet as separate elements, set the pet in a div of its own and set the background to appear as whichever background is equipped.

[Dinocanid]

So don't put the background in a div?

[Abronsyth]

Yeah, rather try something like this;

PHP Code:

<div style='background:url({$mysidia->path->getAbsolute()}picuploads/backgrounds/{$background}.png);'>pet image code here</div>