I have seen quite a few rounded corner boxes using CSS or javascript and solid colors, but I guess the image based boxes aren't even discussed any more. At least I am having difficulty finding any.

The box I am looking for needs to be fluid both horizontally and vertically. The background is a tiled 5x5 image that is already incorporated into the skin used on my site and the borders of the box are a fade from the dark colored panel background to the lighter colored tiled background. This is an example:



This has to be done using the Content Management System (vBadvanced 2.20) for my site, www.TheFloorPro.com. The modules I plan to use it on are the articles and main content of various pages. Right now there are limited options for display of the modules, either no module shell, but the background is too dark, or the standard module shell with 2 different background choices. I want to have one more option that is a cross between the no shell look and one of the shell backgrounds.

How the no shell option looks: http://www.thefloorpro.com/about.php
How the shell looks : http://www.thefloorpro.com/vbgooglemap_instructions.php

Can I do this using all divs? I either have to do the styling in-line or add new CSS to the site through the style manager. I would like to be able to position the text so that it slightly overlaps the dark borders as you see in the example above. Do I slice the image into 8 pieces (4 corners, 4 sides) or use much fewer, but also much larger images that will allow for whole page module widths?

It appears that, with or without the shell, all the module content is contained at the beginning of a <td>. It can be either vBCode, HTML or template based, so anything that can be contained within a <td></td> is fair game.

I hope you can help me figure this out. Thank you for your time.

Jim