css background-repeat problem

[selaine]

I'm having this problem with the "header" on my web page. I just started working with CSS and SSI this week and thought I had the hang of things until now. Here's the deal...

In my Index.asp, I have an SSI:
<!--#include virtual=&quot;/TEST/Rico3/Header.asp&quot;-->

The code for my Header.asp file is:
<TR>
<TD ROWSPAN=2><IMG SRC=&quot;images/Logo.jpg&quot; WIDTH=379 HEIGHT=77 ALT=&quot;&quot;></TD>
<TD ROWSPAN=2 background=&quot;images/pixel_stretch.jpg&quot; HEIGHT=77 WIDTH=&quot;100%&quot; class=&quot;stretch&quot;></TD>
<TD COLSPAN=3><IMG SRC=&quot;images/Solid_BG.jpg&quot; WIDTH=199 HEIGHT=58 ALT=&quot;&quot;></TD>
<TD ROWSPAN=2><div align=right><IMG SRC=&quot;images/Blackhawk_Eagle.jpg&quot; WIDTH=173 HEIGHT=77 ALT=&quot;&quot;></div></TD>
</TR>
<TR>
<TD><IMG SRC=&quot;images/Col3_Row2_Col1.jpg&quot; WIDTH=77 HEIGHT=19 ALT=&quot;&quot;></TD>
<TD><IMG SRC=&quot;images/Col3_Row2_Col2.jpg&quot; WIDTH=51 HEIGHT=19 ALT=&quot;&quot;></TD>
<TD><IMG SRC=&quot;images/Col3_Row2_Col3.jpg&quot; WIDTH=71 HEIGHT=19 ALT=&quot;&quot;></TD>
</TR>
<TR>
<TD COLSPAN=6 background=&quot;images/bar_bg.jpg&quot; height=16 width=&quot;100%&quot; class=&quot;hbar&quot;></TD>
</TR>

My problem is this:
Where you see the ><IMG SRC=&quot;images/Col3_Row2_Col1.jpg&quot; WIDTH=77 HEIGHT=19 ALT=&quot;&quot;>,<IMG SRC=&quot;images/Col3_Row2_Col2.jpg&quot; WIDTH=77 HEIGHT=19 ALT=&quot;&quot;>, and <IMG SRC=&quot;images/Col3_Row2_Col3.jpg&quot; WIDTH=77 HEIGHT=19 ALT=&quot;&quot;>, I want to substitute with:
<TD width=&quot;100%&quot; height=19 COLSPAN=3 background=&quot;images/BG_Spacer.jpg&quot; class=&quot;topfill&quot;></TD> The BG_Spacer image is 1 pixel wide by 19 px high. I want it as a background repeat to span the three columns, so that I can have text links with those cells. This will make maintenance much easier. However when I replace the IMG SRC pieces with <TD width=&quot;100%&quot; height=19 COLSPAN=3 background=&quot;images/BG_Spacer.jpg&quot; class=&quot;topfill&quot;></TD>, the result is my header table gets messed up.

My bg.css code is:
.hbar {
BACKGROUND-POSITION: left; BACKGROUND-IMAGE:url(images/bar_bg.jpg); BACKGROUND-REPEAT: repeat
}
.stretch {
BACKGROUND-POSITION: left; BACKGROUND-IMAGE:url(images/pixel_stretch.jpg); BACKGROUND-REPEAT: repeat-x
}
.topfill {
BACKGROUND-POSITION: left; BACKGROUND-IMAGE:url(images/BG_Spacer.jpg); BACKGROUND-REPEAT: repeat-x
}

Hopefully I've managed to give you enough information to explain my problem. Thanks for any suggestions.....it could be there is a better way to do what I'm trying to do....Thanks to all!

 

[lebisol]

hm...an URL would help visualise all this....
but in general:
&quot; I want it as a background repeat to span the three columns&quot;
this:
-------------
TR>
<TD><IMG SRC=&quot;images/Col3_Row2_Col1.jpg&quot; WIDTH=77 HEIGHT=19 ALT=&quot;&quot;></TD>
<TD><IMG SRC=&quot;images/Col3_Row2_Col2.jpg&quot; WIDTH=51 HEIGHT=19 ALT=&quot;&quot;></TD>
<TD><IMG SRC=&quot;images/Col3_Row2_Col3.jpg&quot; WIDTH=71 HEIGHT=19 ALT=&quot;&quot;></TD>
</TR>
----------------
try assigning <tr background=...>...</tr>

leading into:
-------------
<TD width=&quot;100%&quot; height=19 COLSPAN=3 background=&quot;images/BG_Spacer.jpg&quot; class=&quot;topfill&quot;></TD>,
-----------------
your class 'topfill' already has a background image def. in it....so remove it from table or class....

or consider a &quot;pattrern like&quot; image in the back.
take a look at :

http://mostarnet.com/template.asp

: and look at the top nav (rollover+background image) with W=100% issue...
hth
All the best!

> need more info?
:: don't click HERE ::

 

[selaine]

Excluding the slight difference in the background image of the header, you can check out:

http://www.co.rock-island.il.us/Rico2/index.html

That's the look I'm trying to achieve. while:

http://www.co.rock-island.il.us/Rico/index.asp

is what I have at the moment.

Also, if you want to take a look at:

http://www.co.rock-island.il.us/Rico3/index.asp

you'll be able to see the white space underneath the third column. This white space is supposed to represent a second row of the table that contains three columns. I could set a background color and just type the text into the cells, but then the colors might not be consistent in the header and I think the text even breaks up the header anyway. Also, that last url is where I had already tried your idea.

Any suggestions would be helpful! Thanks!

 

[GaryC123]

NOt sure I'm understanding what you want exactly

<TABLE cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<TR>
<TD ROWSPAN=2><IMG SRC=&quot;images/Logo.jpg&quot; WIDTH=379 HEIGHT=77 ALT=&quot;&quot;></TD>
<TD ROWSPAN=2 background=&quot;images/pixel_stretch.jpg&quot; HEIGHT=77 WIDTH=&quot;100%&quot; class=&quot;stretch&quot;>
ff</TD>
<TD background=&quot;images/Solid_BG.jpg&quot; height=58 COLSPAN=3></TD>
<TD ROWSPAN=2><div align=right><IMG SRC=&quot;images/Blackhawk_Eagle.jpg&quot; WIDTH=173 HEIGHT=77 ALT=&quot;&quot;></div></TD>
</TR>
<TR>
<TD height=19 background=&quot;images/Solid_BG.jpg&quot; class=&quot;topfill&quot;>
te<font color=&quot;#FFFFFF&quot;>test1</font></TD>
<TD height=19 background=&quot;images/Solid_BG.jpg&quot; class=&quot;topfill&quot;>
te<font color=&quot;#FFFFFF&quot;>test2</font></TD>
<TD height=19 background=&quot;images/Solid_BG.jpg&quot; class=&quot;topfill&quot;>
te<font color=&quot;#FFFFFF&quot;>test3</font></TD>
</TR>
<TR>
<TD COLSPAN=6 background=&quot;images/bar_bg.jpg&quot; height=16 width=&quot;100%&quot; class=&quot;hbar&quot;></TD>
</TR>
</TABLE>

http://www.intouchmedialtd.com