Text Overlapping over image ( JSF/Facelets )

CSS:
#_1234bg


{

display:block;

position:absolute;

z-index:0;



}

.c1{width:290px;}

.c2{width:140px;}

.c3{width:100px;}

.c1a{width:130px;padding-left:160px;font-size:10px;font-weight:bold;}

.c2a{width:50px;padding-left:91px;font-size:10px;font-weight:bolder;padding-top: 10px}

.c3a{padding-left:40px;}
 
 
JSF CODE :
<  t:div style="width:800px;height:700px;">
<  t:div id="_1234bg">
<  h:graphicImage id="image1" alt="aa" width="701" value="#{facesContext.externalContext.requestContextPath}/css/wm.png" />



<  h:panelGrid style="position:absolute;font-size:large;margin-left:15px;margin-top:25px;" columns="3" columnClasses="c1, c2, c3 c3a">

<  h:outputText value=" "/>

<  h:outputText value="#{homeManagedBean.account.cy.box1}"/>

<  h:outputText value="#{homeManagedBean.curryr}"/>



<  t:div>





This is specially useful when the user wants to print text overlaid on a background image.