Using an image for infobox border

[Joey_330ci]

I've spent the last 3 hours searching and trying things to get this to work. Basically, I've made a layout using STS and each infobox is in its own table which I have broken into three rows with the top and bottom cells containing my rounded header and footer. I want to use an image for the border as the background in the center cell where the categories or whatever else goes, but I can't figure out how. The image just does not show up. I've tried getting rid of the background color altogether in the stylesheet, adding a background-image, all kinds of things. Someone make me feel stupid please :)

[ABCommerce!]

If I am understanding it correctly you may need to add "repeat-y" to the background image in the stylesheet.

[jhande]

I've made a layout using STS and each infobox is in its own table which I have broken into three rows with the top and bottom cells containing my rounded header and footer.

I'm not totally sure I understand what you are trying to do, but I'll take a crack at it.

 

If you are trying to make a border on the left & right side of the middle row, you need to have three columns. This also assumes you are trying to use one image for the center of the infobox behind the text.

 

<tr class="infoBoxHeading"><td colspan="3"> </td></tr>

<tr><td class="infoBoxLeft"> </td><td class="infoBoxContents"> </td><td class="infoBoxRight"> </td></tr>

<tr class="infoBoxFooter"><td colspan="3"> </td></tr>

 

Stylesheet =

TR.infoBoxHeading {

background: url(images/infobox/Header.gif);

}

TD.infoBoxLeft {

background: url(images/infobox/Left.gif);

}

TD.infoBoxContents {

background: url(images/infobox/Center.gif);

}

TD.infoBoxRight {

background: url(images/infobox/Right.gif);

}

If you are using a repeating image, just add that to your stylesheet class(es).

 

background-repeat: repeat-x;

Change the repeat-x (left & right) to either repeat (for all directions) or repeat-y (up & down) as needed.

 

Hope that might be of some help!