Background Image in Table

For the first time ever.....insert image in background of a table.  
2 tiny codes open a new world for CSB users!

Until now, to put an image into the background of a table, you had to hand-code the entire table, then insert the full code into CSB.  This technique is explained on this page.  

But now it is EASY!  These two examples show how SIMPLE it is to add a texture to your tables now!   EVEN IF YOU HATE WORKING WITH CODE!  So far it works in Internet Explorer and is ignored by Mozilla (like our table color settings.
Use INSERT HTML feature to insert 2 phrases into your page to force your table to have a background image!
The background image in the table WILL repeat to the right and down  if your text goes to wide, or long vertically.  So use a very small image and purposely allow it to repeat inside the table!

WARNING:  So far, this technique works in IE but not in FireFox.
Am currently testing another method to see if that will work better in Firefox!


EXAMPLE 1:
This is the way my DESIGN window in CSB looks:
The webgem image is my placeholder for inserted code.
The first code is put BEFORE the table you want to have the image:
 <span style="background-image: url(^GEMDIR/CSBlogotilefadepurple.gif)" >
and I included the CSBlogotilefadepurple.gif in the web component.

The second code is placed AFTER the table that has the image
</span>

RESULT
IT'S EASY!




EXAMPLE 2:
This is the way my DESIGN window in CSB looks:
Webgem code inside outer table.

The webgem image is my placeholder for inserted code.
The first code is put BEFORE the table you want to have the image:
 <span style="background-image: url(^GEMDIR/brickgray.jpg)" >
and I included the brickgray.jpg in the web component.

The second code is placed AFTER the table that has the image
</span>


RESULT

Outside table has background image.
Inside table has white background.


EXAMPLE 3:
This is the way my DESIGN window in CSB looks:
Webgem code inside outer table.

The webgem image is my placeholder for inserted code.
The first code is put BEFORE the table you want to have the image:
 <span style="background-image: url(^GEMDIR/windowbg4.gif))" >
and I included the brickgray.jpg in the web component.

The second code is placed AFTER the table that has the image
</span>


RESULT
Outside table has background image, gradient.

Inside table cell: 1 has transparent background, purple text
cell 2: This cell has a green background
Inside table cell: 3 has transparent background, purple text

FIREFOX TESTING....

Can you See the image

This is some text with a gradient background.

Outside table has background image, gradient.

Inside table cell: 1 has transparent background, purple text
cell 2: This cell has a green background
Inside table cell: 3 has transparent background, purple text


EXAMPLE 4:  THIS DOES NOT WORK!
This is the way my DESIGN window in CSB looks:
KNOWN LIMITATION of the trick demonstrated on this page:
Can not put a background image into a table that is INSIDE A TABLE without hand coding the full table as seen in this page.
Putting code WITHIN a table does not work fully.
The webgem image is my placeholder for inserted code.
The first code is put BEFORE the table you want to have the image:
 <span style="background-image: url(^GEMDIR/gray.jpg)" >
and I included the gray image in the web component.

The second code is placed AFTER the table that has the image
</span>


RESULT - Not fully stable.  
The background image will sometimes disappear.
This outer table has a black background color. Span setting is last item before the inner table.
no cell color.....background image shows through
cell color covers background image
Font color is chosen based on color of background expected.