CSS for text overlay on category layout

-- url of the page with the problem -- : 109.73.160.162/~cremur/index.php?option=...t=listing&Itemid=255
-- HikaShop version -- : 2.3.5
-- Joomla version -- : 3.3.6

Hi I am trying to achieve this look with category layout
gyazo.com/0191509f2c06f540ce2faf9307dabb1a
I have modified the css
.hikashop_category_name {
color: #555;
font-weight: bold;
font-size: 14px;
background: black;
display: block;
margin-bottom: 160px;
margin-top: -200px;
}

The 'Category Text" overlays the image ok but the black background is behind the image? I can't work out how to bring the black background above the Category image - see attachment
Any help really appreciated

Hi,

You potentially have to play with the z-index css property.

Yes i tried Z-index before but it doesnt have any effect. The solution is to add a position: relative; rule this brings the black background forward and therefore solves my issue:
hikashop_category_name {
color: #555;
font-weight: bold;
font-size: 14px;
background: black;
display: block;
margin-bottom: 160px;
margin-top: -200px;
position:relative;
}

More examples on...... Text Overlay

Jomy