Background Image in Table

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="725" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 33 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="71"><div> <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7">  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="14">  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7"></div> </tD> <tD VALIGN=CENTER><NOBR><div> <DIV style="TEXT-ALIGN: center"> <STYLE type=text/css> #rollbutton a { color: #C0DCC0; font-size:12px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 85px; height: 19px; padding: 0px; } #rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <A href="http://www.samisite.com" title="Samisite.com Home Page" target="_top" onfocus="this.blur()">HOME</A> <A href="http://www.forum.samisite.com" title="Visit the Samisite Webmaster Community Forum" target="_top" onfocus="this.blur()">FORUM</A></DIV> </DIV></div> </NOBR></tD> </tR> </TABLE></div> <div> </div> </td> </tr><tr> <td valign="top" height=430 BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <STYLE>  </STYLE>                                                  </div> <bR> <bR> <div> <B>Background Image in Table</B></div> <bR> <div> <B>For the first time ever.....insert image in background of a table.  </B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" >  <STYLE TYPE="text/css">  </STYLE>  </FONT></div> <div> <B>2 tiny codes open a new world for CSB users!</B></div> <bR> <div> <B>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.  </B><A HREF="id115.htm" TARGET="_top" TITLE="Background Image in Table"><B>This technique is explained on this page.</B></A><B>  </B></div> <bR> <div> <B>But now it is EASY! </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>  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.</B></FONT></div> <div> <B>Use INSERT HTML feature</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> to insert 2 phrases into your page to force your table to have a background image!</B></FONT></div> <div> <B>The background image in the table </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>WILL repeat</B></FONT><B> 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!</B></div> <bR> <div> <B>WARNING:  So far, this technique works in IE but not in FireFox.</B></div> <div> <B>Am currently testing another method to see if that will work better in Firefox!</B></div> <bR> <bR> <div> <B>EXAMPLE 1:</B></div> <div> <B>This is the way my DESIGN window in CSB looks:</B></div> <div> <B><IMG SRC="58725070.gif" border=0 width="293" height="263" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> <B>The webgem image is my placeholder for inserted code.</B></div> <div> <B>The first code is put BEFORE the table you want to have the image:</B></div> <div> <B> <span style="background-image: url(^GEMDIR/CSBlogotilefadepurple.gif)" ></B></div> <div> <B>and I included the CSBlogotilefadepurple.gif in the web component.</B></div> <bR> <div> <B>The second code is placed AFTER the table that has the image</B></div> <div> <B></span></B></div> <bR> <div> <B>RESULT </B></div> <div>  <span style="background-image: url(HTMLobj-1407/CSBlogotilefadepurple.gif)" >  </div> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0" WIDTH="252" BORDERCOLORLIGHT="#6600CC" BORDERCOLORDARK="#6600CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 188 WIDTH="244"><div> <B>IT'S EASY!</B></div> </tD> </tR> </TABLE></div> <div>  </span>  </div> <bR> <bR> <bR> <bR> <div> <B>EXAMPLE 2:</B></div> <div> <B>This is the way my DESIGN window in CSB looks:</B></div> <div> Webgem code inside outer table.</div> <div> <B><IMG SRC="57e49c40.gif" border=0 width="329" height="196" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <div> <B>The webgem image is my placeholder for inserted code.</B></div> <div> <B>The first code is put BEFORE the table you want to have the image:</B></div> <div> <B> <span style="background-image: url(^GEMDIR/brickgray.jpg)" ></B></div> <div> <B>and I included t</B><B>he </B><B>brickgray.jpg</B><B> in the we</B><B>b component.</B></div> <bR> <div> <B>The second code is placed AFTER the table that has the image</B></div> <div> <B></span></B></div> <bR> <bR> <div> <B>RESULT </B></div> <div>  <span style="background-image: url(HTMLobj-1413/brickgray.jpg)" >  </div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="311" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 188 ><NOBR><bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="287" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 62 ><NOBR><div> Outside table has background image.</div> <div> Inside table has white background.</div> <bR> </NOBR></tD> </tR> </TABLE></div> <div>   </div> </NOBR></tD> </tR> </TABLE></div> <div>  </span>  </div> <bR> <bR> <div> <B>EXAMPLE 3:</B></div> <div> <B>This is the way my DESIGN window in CSB looks:</B></div> <div> Webgem code inside outer table.</div> <div> <B><IMG SRC="5a4dd680.jpg" border=0 width="477" height="360" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <div> <B>The webgem image is my placeholder for inserted code.</B></div> <div> <B>The first code is put BEFORE the table you want to have the image:</B></div> <div> <B> <span style="background-image: url(^GEMDIR/windowbg4.gif))" ></B></div> <div> <B>and I included the brickgray.jpg in the web component.</B></div> <bR> <div> <B>The second code is placed AFTER the table that has the image</B></div> <div> <B></span></B></div> <bR> <bR> <div> <B>RESULT </B></div> <div>  <span style="background-image: url(HTMLobj-1441/windowbg4.gif)" >  </div> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0" WIDTH="459" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 293 ><NOBR><div> Outside table has background image, gradient.</div> <bR> <div> <TABLE BORDER="3" CELLPADDING="2" CELLSPACING="0" WIDTH="414" BORDERCOLORLIGHT="#9999FF" BORDERCOLORDARK="#9999FF" FRAME="HSIDES" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 62 ><NOBR><div> Inside table cell: 1 has transparent background, purple text </div> </NOBR></tD> </tR> <tR> <tD VALIGN=CENTER BGCOLOR=#C0DCC0 HEIGHT= 73 WIDTH="410"><div> cell 2: This cell has a green background</div> </tD> </tR> <tR> <tD VALIGN=CENTER HEIGHT= 73 ><NOBR><div> Inside table cell: 3 has transparent background, purple text </div> </NOBR></tD> </tR> </TABLE></div> <div>  </div> </NOBR></tD> </tR> </TABLE></div> <div>  </span>  </div> <bR> <div> <B>FIREFOX TESTING....</B></div> <div>  <style type="text/css"> .gradient1 { background-image: url(HTMLobj-1447/windowbg4.gif); background-repeat: repeat; } .headerimg { background-image: url(HTMLobj-1447/catbg2.jpg); background-repeat: repeat; } </style> <h1 class="headerimg">Can you See the image</h1> <div class="gradient1">This is some text with a gradient background. <p>  </div> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0" WIDTH="459" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 293 ><NOBR><div> Outside table has background image, gradient.</div> <bR> <div> <TABLE BORDER="3" CELLPADDING="2" CELLSPACING="0" WIDTH="414" BORDERCOLORLIGHT="#9999FF" BORDERCOLORDARK="#9999FF" FRAME="HSIDES" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 62 ><NOBR><div> Inside table cell: 1 has transparent background, purple text </div> </NOBR></tD> </tR> <tR> <tD VALIGN=CENTER BGCOLOR=#C0DCC0 HEIGHT= 73 WIDTH="410"><div> cell 2: This cell has a green background</div> </tD> </tR> <tR> <tD VALIGN=CENTER HEIGHT= 73 ><NOBR><div> Inside table cell: 3 has transparent background, purple text </div> </NOBR></tD> </tR> </TABLE></div> <DIV ALIGN="LEFT"></DIV> <div>  </div> </NOBR></tD> </tR> </TABLE></div> <div>  </div>  </div> <bR> <bR> <div> <B>EXAMPLE 4:  THIS DOES NOT WORK!</B></div> <div> <B>This is the way my DESIGN window in CSB looks:</B></div> <div> <B>KNOWN LIMITATION of the trick demonstrated on this page:</B></div> <div> Can not put a background image into a table that is INSIDE A TABLE without <A HREF="http://www.samisite.com/backgrounds/id16.htm" TARGET="_top" TITLE="http://www.samisite.com/backgrounds/id16">hand coding the full table as seen in this page</A>. </div> <div> Putting code WITHIN a table does not work fully.</div> <div> <B><IMG SRC="5781bf50.gif" border=0 width="283" height="245" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> <B>The webgem image is my placeholder for inserted code.</B></div> <div> <B>The first code is put BEFORE the table you want to have the image:</B></div> <div> <B> <span style="background-image: url(^GEMDIR/gray.jpg)" ></B></div> <div> <B>and I included the gray image in the web component.</B></div> <bR> <div> <B>The second code is placed AFTER the table that has the image</B></div> <div> <B></span></B></div> <bR> <bR> <div> <B>RESULT - Not fully stable.  </B></div> <div> <B>The background image will sometimes disappear.</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="277" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER BGCOLOR=#000000 HEIGHT= 229 WIDTH="265"><div> This outer table has a black background color. Span setting is last item before the inner table. <FONT SIZE="3" COLOR="#000000" FACE="Arial" > <span style="background-image: url(HTMLobj-1391/gray.jpg)" >  </FONT></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="249" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 59 WIDTH="237"><div> no cell color.....background image shows through</div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#FFCC33 HEIGHT= 38 WIDTH="237"><div> cell color covers background image</div> </tD> </tR> </TABLE></div> <div>  </span>  <FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" > Font color is chosen based on color of background expected.</FONT></div> </tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>