Помогите вставить полупрозрачный блок под текст

Блок новостей (текст)

Code:

<div class="clear" style="height: 30px"></div>
<h2><?=$i['name']?></h2>
<div class="text"><?=$i['txt']?>



  
<div  style="height: 50px;"></div>

<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div style="margin-top: 50px;" class="yashare-auto-init" data-yashareL10n="ru" mdata-yashareType="link" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug,gplus,surfingbird"

></div>


<div class="clear"></div>
  <a href="/<?=$url[0]?>/register1"  class="reg_button"></a>


</div>
</div>


</div>

В стилях прописал:

Code:

.example3 {
    display:inline-block;  
    position:relative;
}
.example3 .example_text {
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    color:#fff;
        
    padding:10px;
    background-color:rgba(0,0,0,.3);
    
}
.example3 h6 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
}
.example3 span {
    font-size:12px;
}

как туды впендюрить "это":

Code:

<div class="example3">
    <img src="/examples/20120821/bg.png" class="example_beauty" />
    <div class="example_text">
        <h6>Я - заголовок</h6>
        <span>А я - комментарий к этой прекрасной картинке. Я такой длинный, что занимаю несколько строчек.</span>
    </div>
</div>

Я просто полный ноль, но не хотелось поднимать паники, всего то надо добавить фон к тексту
Спасибо