Question

A page displays a banner image which is set to float such that re-sizing the page keeps the banner centred.

I want to display some text that will sit upon the banner image at a position relative to the banner’s left bottom corner. The desire is that when the page is re-sized and the banner image moves, so does the text. (The text will change depending upon certain conditions set in the script.)

Experimenting with css, I can get the text over the image, but it does not move when the page is resized. Reading what others have done, I set a div as a placeholder for the image. The text is set within an

and my css position for this selector is set “relative”. I know the css works because I can change the text colour and size, etc. But any css position I set for the text will not change the text float characteristics!

Here’s my code which renders via a php script. Anyone have an idea what’s wrong here?

<!--  html  -->
<div id="wbr_logo" align="center"></div>

<!-- later on down the script.. -->
<?php
function HeaderTitle($cTitle='')
{   
?>
  <div class="wbr_logo" ><H1><?php echo $cTitle;?></H1></div>
<?php
}

<!-- css -->

.wbr_logo {
position:relative;
    height: 200px;
    background-image: url("/ADMIN/images/banner.png"); 
    background-repeat: no-repeat;
    background-position: center;
 }

.wbr_logo H1 {
position:relative;
color:red;
}

---

The following works nicely (with MANY thanks to DMCS)

<div class="wbr_logo"><h1><div id="floating_text"></div></h1></div>

function HeaderTitle($cTitle='')
{   
    ?>
        <script type="text/javascript">
            $('#floating_text').html("<?php echo $cTitle;?>");
        </script>
    <?php
}

.wbr_logo {
  position: relative;
  width: 1260px;
  height:180px;
  margin: 0 auto; /* centers it */
  background-image: url("/ADMIN/images/wbs_admin_banner.png"); 
}

#floating_text {
  position: absolute;
  left: 2px;
  bottom: 2px;
  color:white;
}

Answer 1

<div class="wbr_logo"><div class="floating_text">Title here</div></div>


.wbr_logo {
  position: relative;
  width: imageWidth + 'px';
  margin: 0 auto; /* centers it */
  background-image: url("/ADMIN/images/banner.png"); 

}

.floating_text {
  position: absolute;
  left: 2px;
  bottom: 2px;
}