title: css:float text over centred image
body: <p>A page displays a banner image which is set to float such that re-sizing the page keeps the banner centred.</p>
  
  <p>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.)</p>
  
  <p>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 <H1></H1> 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!</p>
  
  <p>Here's my code which renders via a php script.  Anyone have an idea what's wrong here?</p>
  
  <pre><code>&lt;!--  html  --&gt;
  &lt;div id="wbr_logo" align="center"&gt;&lt;/div&gt;
  
  &lt;!-- later on down the script.. --&gt;
  &lt;?php
  function HeaderTitle($cTitle='')
  {   
  ?&gt;
    &lt;div class="wbr_logo" &gt;&lt;H1&gt;&lt;?php echo $cTitle;?&gt;&lt;/H1&gt;&lt;/div&gt;
  &lt;?php
  }
  
  &lt;!-- css --&gt;
  
  .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;
  }
  </code></pre>
  
  <p><hr>
  <em>The following works nicely (with MANY thanks to DMCS)</em></p>
  
  
  
  <pre><code>&lt;div class="wbr_logo"&gt;&lt;h1&gt;&lt;div id="floating_text"&gt;&lt;/div&gt;&lt;/h1&gt;&lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>function HeaderTitle($cTitle='')
  {   
      ?&gt;
          &lt;script type="text/javascript"&gt;
              $('#floating_text').html("&lt;?php echo $cTitle;?&gt;");
          &lt;/script&gt;
      &lt;?php
  }
  </code></pre>
  
  
  
  <pre><code>.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;
  }
  </code></pre>