[<!--text-->
<?php if ($c->isEditMode()) { ?>
<div id="content" style="position:relative;">
<?php } else { ?>
<div id="content">
<?php }; ?>
<?php
$a1 = new Area('Main Content');
$a1->display($c);
?>
</div>

<!--background-->
<?php if ($c->isEditMode()) { ?>
<div id="main" style="position:relative;">
<?php } else { ?>
<div id="main">
<?php }; ?>
<?php
$a = new Area('Background Content');
$a->display($c);
?></div>]

I have text that sits on a background. Each page in the site has a different background so I have created the code above to allow my client to change both. The 'content' and 'main' ids have different z-index values. However, when text is entered into the content area it pushes the the background stacked underneath it down the page. Instead of working independently of it.

Any solutions please?