Adding images to sidebox headers

[koenvandamme]

Hi,
I just read the tutorial on how to replace sidebox headers with images and it works fine, but I want to ADD images to the headers. I know it can be done as you can see here:
http://osc3.template-help.com/zencart_20585/index.php

I've searched the forum but to no avail. Can anyone point me in the right direction?

[schoolboy]

What they are doing in the style declaration for each sidebox heading is adding a background COLOUR, and then a background IMAGE.

So, if your wanted your INFORMATION sidebox to have a ladybug image on the left of the box heading text, you would make a little image of the ladybug super-imposed on a background of the same colour as the declared BG colour:

In their case, they set the background colour to #EF8585

Their little ladybug image looks like this:



Then, in their stylesheet, they configure it as follows:

url(../images/left_top_2.gif) no-repeat scroll left top;

[koenvandamme]

I probably would never have figured that out on my own. Thank you for your very clear answer schoolboy!

[schoolboy]

I probably would never have figured that out on my own. Thank you for your very clear answer schoolboy!

Well, I didn't figure it out on my own either! ...

I use FIREFOX browser with the Web Developer Toolkit add-on. Both obtainable from mozilla.org.

The web developer toolkit has a vast array of features that allow you to analyse and dissect a web page, and do "off-line" edits to the page source code. I used this to analyse the page of that site, and quickly found out how they were achieving their result.