css：画像上にテキストを浮かべて

Question

ページには、ページのサイズを変更してバナーを中央に保持するように浮動するように設定されたバナー画像が表示されます。

私は、バナーの左下隅からの相対位置でのバナー画像上に座って、いくつかのテキストを表示したいです。ページのサイズが変更され、バナー画像が移動すると、テキストも移動します。 （テキストはスクリプトで設定特定の条件に応じて変化します。）

をCSSを試す、私は画像の上にテキストを得ることができますが、ページのサイズが変更されたとき、それは移動しません。他の人が読んだことを読んで、divをイメージのプレースホルダに設定しました。テキストは

に設定され、このセレクタのCSS位置は「相対」に設定されています。私はテキストの色やサイズなどを変更することができるので、CSSの動作を知っています。しかし、私がテキストに設定したCSSの位置は、テキストの浮動小数点の特性を変更しません！

ここに私のコードは、PHPスクリプトをレンダリングします。誰でも何が間違っているのか考えていますか？

<!-- 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; 
} 

---

（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; 
}