Hey guys, I was wondering if you could help me with a problem that's bugging me quite a bit.
I'm editing a Blogger site of mine and I'd like some particular widgets to have images for titles instead of just text with an image background. So far, I've been able to get the sprite to line up correctly for each section, but I can't seem to get the text from the title to disappear. Everything I've tried so far, such as
display:none; or simply not naming the widget results in the entire title disappearing - image included. When I try to replace the
<data:title/> line with
<img src="sprite.png"> I end up with the entire sprite image. I've changed the style position and moved it around, but it shows up on top of the title (rendering the border pointless) and with the rest of the sprite instead of that section being hidden.
If I'm working with the following code for getting the sprite to work for each widget (haven't figured out a better way to do it - if you have suggestions, send them away!) then how can I get each of these widgets to not show the title text, but keep the title border and everything similar to that?
Code:
#HTML6 h2 {
background: url(sprite image link);
background-position:0 -210px;
}
#HTML16 h2 {
background: url(same sprite's image link);
background-position:0 -490px;
}
Any and all help is greatly appreciated.