css - Having a banner on top of an image in Microsoft Outlook -

i want have banner on top of image (overlapped on top of image) when sending image via email. this:

this haml code:

    %table.inline-block{align:'left'}       %tbody         %tr           %td.w30{width: '15'}           %td#wrap             - if cat.present?                 .banner updated price                 = image_tag("#{cat.photos}") 

and these related css files:

#wrap {   position:relative;   width: 195px;   height: 165px;   }  .banner {   position: absolute;   width: 100%;   height: 30px;   line-height: 30px;   background: #05c3de;   color:white   } 

the problem microsoft outlook not understand css position: 'absolute' or position: 'relative', , puts banner on top of image (not overlapped)

so changed haml code below:

    %table.inline-block{align:'left'}       %tbody         %tr           %td.w30{width: '15'}           %td#wrap             - if cat.present?               <!--[if mso]>               <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">               <v:fill type="tile" src="#{property.photos.first.thumbnail}"/>               </v:background>               <![endif]-->               <!--[if !mso]>               .banner updated price               = image_tag("#{cat.photos}")               <![endif]--> 

i still have same problem, image displayed in outlook:

any ideas how fix it? appreciate or ideas. thanks, venus

ok, after spending lots of time on email templates realised should use tables. (position absolute , relative not rendered in gmail , outlook templates , can't overlap images on top of each other).

        - if cat.present?            <!--[if !mso]><!-- -->               %table{style: "background-image: url('#{cat.photos.first.thumbnail}'); width: 195px; height: 165px;"}                   %tbody                     %tr                       %td.banner                         updated price              <!--<![endif]-->                  :plain                   <!--[if mso]>                   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="position:relative;width:195px;height:165px;z-index:1" fillcolor="#e8e8e8">                   <v:fill type="frame" src="#{property.photos.first.thumbnail}"/>                   <v:textbox inset="0,0,0,0">                   </v:textbox>                   </v:rect>                   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="v-text-anchor:middle;width:195px;position:relative;width:195px;height:30px;z-index:2;v-text-anchor:middle;" fillcolor="#05c3de">zero                   <v:textbox inset="50px, 5px, 50px, 5px">                   <span style="color:#ffffff;font-family:sans-serif;font-size:13px;margin-left: 50px;">updated price</span>                   </v:textbox>                   </v:rect>                   <![endif]--> 

in approach used image table background , use banner table row cover background. don't approach since image should not css background (should html image tag ), , want set 'alt' property image.

unfortunately tried lots of other approaches , couldn't come other solutions. :) let me know if have other ideas.

cheers,