Joomla - Banner module - title position

Question

Is there a way to put a title of a module (in my case a banner module) over an image?

Here is an example: http://www.nulaena.si/temp

I would like to put text "Ask a technical question" over the yellow image (background).

I tried with margin-bottom: -10px and z-index but with no success. Maybe I didn't do it right.

This is the code I have so far:

<div class="moduletable_banner-yellow">
<h3>Ask a technical question</h3>
<div class="bannergroup_banner-yellow">
<div class="banneritem_banner-yellow"><a href="#"><img src="http://nulaena.si/joomla/images/banners/banner-yellow.png" /></a><div class="clr"></div></div>
</div>      
</div>

.moduletable_banner-yellow h3 { 
  margin-bottom: 0px; 
  padding-left: 20px; 
  font-family: arial; 
  font-size: 16px; 
  font-weight: bold; 
  text-shadow: #6374AB 2px 2px 2px; 
  text-transform: uppercase; 
  text-decoration: none; 
  color: #fff; 
  text-align: left; 
}

I tried to put banner image as a background like in the example:

.moduletable_banner-yellow {
  background-image:url('http://nulaena.si/joomla/images/banners/banner-yellow.png');
  height: 50px;
  width: 511px;
}

But then you can't click on the banner because there is no image selected in the back-end (there is no link, only text). If I select an image it is pushed down because of the text.

I guess another option is to modify source code so would be a link, but I would rather avoid it.

Answer 1

Try using absolute positioning with the text? I think that may work. Give the two modules the exact same position in Module Manager, and then 'absolutely position' the text so it's over the banner?

Or perhaps just load the image & text into the same module? I'm not sure I see the benefit of doing it using two separate modules? What would be the point if they're just going to overlap?