need help with custom sideboxes header graphics

Okay, I am working on building a custom template from scratch and I am trying to add graphics to the headers of the side boxes:

i.e.:
sidebox_header_left_bg.gif
sidebox_header_right_bg.gif
sidebox_header_bg.gif

for some reason I can't seem to get it to work when I call for those images in the css file (I started from scratch with the default template css file)

I can get the right or left one to show but not all 3 at the same time...???????????

oh and yes the gif's are in the correct place /images/:blink:

I have looked on several css tutorial sites and can't seem to find the solution as well as have looked in this forum

What I am trying to accomplish is the same look of the sideboxes as in the pure blue template

You can't have more than one background image for an element unless you are using CSS3 syntax and have a modern browser.

You need to either add wrapper divs to the sidebox headers in the sidebox handling file, or decide on the sidebox width and combine the images to make one fixed-width bg image. This would generally be easier unless you have a very odd situation of changing sidebox widths.

Thanks for the quick response!

Does the pure blue template use css3 syntax? I looked through the css of it and was much different than the default template css...but it used the 3 files like I was attempting to do.

I liked this idea because it fits well with any element width, meaning I was going to do the same thing with my header nav bar...

The Pure templates use extra coded wrapper elements to hold the two background images (you don't need three - one is left and one is center+right). This was an advanced technique ten years ago ("sliding door" technique). As this particular rounded corner effect only has the curve without "shiny" highlighting, you can do the same with one tiny image and one stylesheet rule (this will work for all modern browsers; IE8 or older will get square corners).

.leftBoxHeading, .rightBoxHeading {
background: url(../images/sidebox_header_bg.gif);
border-radius: 5px 5px 0 0;
}

OK great thanks for the detailed explanation I will give it a try...