css background-repeat problem

background with text links

[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="/TEST/Rico3/Header.asp"-->

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

My problem is this:
Where you see the ><IMG SRC="images/Col3_Row2_Col1.jpg" WIDTH=77 HEIGHT=19 ALT="">,<IMG SRC="images/Col3_Row2_Col2.jpg" WIDTH=77 HEIGHT=19 ALT="">, and <IMG SRC="images/Col3_Row2_Col3.jpg" WIDTH=77 HEIGHT=19 ALT="">, I want to substitute with:
<TD width="100%" height=19 COLSPAN=3 background="images/BG_Spacer.jpg" class="topfill"></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="100%" height=19 COLSPAN=3 background="images/BG_Spacer.jpg" class="topfill"></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!

[BlobFisk]

Welcome to WebmasterWorld, selaine

It might be best not to use the HTML background on the <td>, and just use CSS background,which will give you far more control...

HTH

[selaine]

I am making a bit of headway on my problem and will keep on plugging away. I appreciate your advice and will change my code so that the background-image in imbedded in the style, rather than in my html code (I assume thats what you meant, but am just learning). Do you know why that make a difference as far as level of control? Thanks!

[BlobFisk]

With the HTML background, tiling occurs automaticall - you have no control.

Using CSS you can control if there should be tiling or not, which direction, how many times etc. etc.

Some good information here [w3schools.com] at w3school.

HTH

[selaine]

Thanks for the reference. I was wondering if you could explain something else to me, or point in the right direction. I would like to apply one font style to an entire row in a table using an external style sheet. How can I apply it to the entire row using as little code as possible? Thanks!

[DrDoc]

Give the tr tag a class name, and then use this in your CSS:

.classname td {
/* styles go here */
}

[BlobFisk]

In your CSS:

tr.myRowClass td {
Style Rules
}

This say that and table cell (td) in a table row (tr) that has a class of myRowClass will take the style rules enclosed withing the curley braces.

And in you HTML it is then <tr class="myRowClass">.

HTH