如何避免重叠

Question

我如何做到响应，因为如果我调整浏览器的大小，它就会重叠。 请帮忙 这是我的代码：

HTML

<div style="height:100%" class="image">       
<?php                           
        `$newsbawah = $this->model_utama->view_ordering_limit('newsbawah','id_iklanatas','DESC','0','1');
foreach ($newsbawah->result_array() as $row) { 
$string = $row['gambar'];
if ($row['gambar'] != ''){
        `echo "<img style='width:100%; height:750px;'` 
src='".base_url()."asset/foto_newsbawah/$row[gambar]' />                                
<h4 align='center'>
<span>$row[isi]</span></h4>";
}
} 
?> 

CSS

.image {
position: relative;
width: 100%; /* for IE 6 */  
}
.image h4 {
text-align:center;
position: absolute;
top: 20px;
left: 0;
width: 100%;
color: #fff;
}
.image span {
width:100%;
height:100%;
float:left;
clear:left;
color: white;
font: 18px/30px Helvetica, Arial, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}

如果我调整浏览器大小，图像已经响应，但文本和背景（透明）重叠。 这是屏幕截图：

非常感谢任何帮助 谢谢