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:
and my code like this:
(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.
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:
$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.