A lot of joomla users wanted to add individual header images for every category and there are lots of ways to make it possible, and the first step you will certainly be doing was to search for a joomla header module that has the capability to add image header.

But before you do that you must consider some serious analysis, keep in mind that your image header will stay at that position forever. Once you upgrade your version of joomla there will be a possibility that a certain extensions will show unexpected behavior. And you must also consider that you can’t just put an additional extension whenever you want. Remember some extensions are using Jquery and having those scripts overlaps each other will display unexpected result.

The key to prevent those problems is to keep away from adding an extension and think of a way to improvise base from what you already have.

And what I’m going to show you here is how to use your simple built-in banner extension to make improvised image header. (this website is a perfect example for this tutorial as I have dif. image header for every sections). We are going to make use of that simple banner extension and use it as image header for each category and replace the image using CSS.

1. First you need to add additional position on your template’s index.php. as for my example I’m using bannerhead as it’s position name.

1. <jdoc:include type="modules" name="bannerhead" style="raw" />
   

insert it where you wanted your header image to appear.

2. Update you templatedetail.xml

1. <positions>
2. <position>bannerhead</position>
3. <position>left</position>
4. <position>user1</position>
5. <position>right</position>
6. <position>user2</position>
7. </positions>

3. Now log-in to you joomla admin and go to your component>banner click on the category tab, create a category (just one is enough) then save it, then click on client, create a new client (just one is enough) then save it.

4. Now go to banner tab, and then create a new banner, you can add an image if you want just to make sure that it was running (don't worry we will take those out using CSS in just a few mins), but don’t forget to select a client and category you can leave the rest unfilled. Then save it.

5. Now go to Extension> module manager , click on new and select Banner. fill up the title (mine I call it joomlahead,this will be my image header for joomla category) and select the position (for my example it is bannerhead).

Then on menu assignment select the categories that you wanted this banner to appear. (for me its joomla), and on the parameter settings you only need to filled-up the client and category. Then the most important is the Module suffix. As for my example I use ‘_joomla’. then save it.

6. go to the page where you are expecting that banner to appear. then refresh the page, after testing. open up your template.css and we will now hide that image and replace it.

This will hide the division which contains the <img> tag.

1. Div .bannergroup_joomla div{
2. visibility:hidden;
3. }

then this will add your desired image header as background image.

1. Div .bannergroup_joomla{
2. background-image:url(../images/joomlahead.png);
3. background-position: top right;
4. background-repeat:no-repeat;
5. width: 488px;
6. height: 272px;
7. padding-left: 23px;
8. padding-bottom: 2px;
9. }

And thats it ^^ you have done your first header image, if you wanted to add more header images then go back to step 5, just use the same client and category but choose a different menu assignment off course. And make sure you don’t forget to fill up the module suffix (make sure each of them has different module suffix) so that you can pull them out on CSS.

joomla will give you a constant naming convention of bannergroup + [module suffix].

you can sneak through my Chibichibi style sheets and you will see a lot of .bannergroup styling there ^^. I know you'll be making fun of my CSS because it was too crowded, and It's embarrassing, it was all because I'm just new to CSS back then.