How do I make re-sizable graphics ?

Hi all,
I have been learning about css and the tutorial used two .gif graphic in order to produce grey backgrounds on the side columns. ( actually it is css for a Joomla
template - but I dont think that matters). I wanted to change the color to green but when I opened the gif in paintshop or in freehand, I couldn't work out how the image was made. The images change with the window - ie are resizable.

I made an image by filling a box with color but it didn't re-size.

I have put the images files on the following page so that you can see what they are and download if you want.

www.chit-chat.biz

I would like to know how these images are made and how can I edit the color or make other ones.

Thanks for any help.

We would need to see the site with joomla on it.

Hi - I have been doing a bit of work !

I have now taken the template that I am working with out of Joomla context and placed it on my site:

www.chit-chat.biz

(there is now no reference to Joola modules etc - just a basic template.)


The stylesheets are seperated between layout and customize in the /css directory.

In the customize.css you will see the use of images to color the coloumns.

The grey ones work fine (these are original ones)
The yellow ones - only the rhs one works but when I use the lhs one, the rhs image is not shown.
( You can change them by commenting out )

I changed the color with by editing with Serif Photo-Plus 6.0 which does not output gif - only jpg.

What has gone wrong with my threecol-rx.jpg image ?

Also - How do I make these images ?

Many thanks for your help.

This isn't going to be easy with the layout you have usually fluid 3 column layouts have no margin or padding around them which makes it possible for the columns to appear equal height. Look at this example. http://bonrouge.com/3c-hf-fluid.php

Thanks for the link.

I will follow the examples in the site.