Background Image Repeat Problem

[Reesho]

I have a problem with my css background image. It only seems to extend down the page through 100% of the content and does not completely fill up the cell. I have three different repeating gradient background images to use in different places on the page. The style code in the head is:

h1 {
background-image:url(images/Gradient_BG-800.jpg);
	background-repeat:repeat-y;
	margin:0 auto;
	}
h2 {
background-image:url(images/Gradient_BG-400-left.jpg);
	background-repeat:repeat-y;
	margin:0 auto;
	}
h3 {
background-image:url(images/Gradient_BG-400-right.jpg);
	background-repeat:repeat-y;
	margin:0 auto;
	}

The h1 works fine but the h2 and h3 don't fill the entire background of their respective <td> cells. the degree of fill seems related to the content.

Here are the details of the <td> cells:

<tr>
<td align="center" valign="top" width="400" height="150"><h2>
<img src="images/spacer.gif" height="150" width="90" alt="" border="" align="left">
<span class="yellowfont3">CONTACT THE BAND</span><br><br>
<span class="whitefont2">DAVID CLARK<br>
L.I. PARAMOUNT MUSIC &amp; ENTERTAINMENT</span><br>
<span class="smallbluelinks"><a href="mailto:[e-mail]">[e-mail]</a></span><br>
<span class="whitefont3">[phone] Cell<br>
[phone] x16, Office</span></h2>
</td>
<td align="center" valign="top" width="400" height="150"><h3>
<img src="images/spacer.gif" height="150" width="90" alt="" border="0" align="right">
<span class="bigyellowlinks"><a href="shows.htm">Click Here for<br>
INVISIBLE SUN DATES</a></span><br>
<br>
<span class="bigbluelinks">
<a target="_blank" href="http://www.myspace.com/invisiblesunpolicetribute">
Visit us at myspace</a></span><br>

</h3>
</td>
</tr>

The problem manifests this way:
http://invisiblesunband.com/Broken_Background_Image.png

Thanks so much for any help or suggestions!

[Airshow]

You can simplify things a lot by placing the table within a div styled with the full width gradient pattern. This way, you don't need left/right half-patterns.

#container {
	width : 800px;
	position : relative;
	left : 50%;
	margin-left : -400px;
	background-image:url(images/Gradient_BG-800.jpg);
	background-repeat:repeat-y;
	color: #FFFFFF;
}
#container a {
	text-decoration : none;
}
#container a:hover {
	text-decoration : underline;
}
#container table {
	width : 600px;
}
#container p {
	margin : 0;
}
#container h2 {
	margin : 12px 0;
	font-size : 1.0em;
	color : #FFFF00;
}
#container h2 a {
	color : #FFFF00;
}
#container .small {
	font-size : 0.8em;
}
#container .large {
	font-size : 1.0em;
}
#container .blue {
	color : #00CCFF;
}
#container .yellow {
	color : #FFFF00;
}
#container .bold {
	font-weight : bold;
}

<div id="container">
	<table border="0" cellpadding="20" cellspacing="0" align="center">
	<tr>
	<td colspan="2" align="center">
	<p class="large yellow bold">Don't miss Invisible Sun etc. .....</p>
	</td>
	</tr>
	<tr>
	<td align="center" valign="top" width="50%">
	<p><h2>CONTACT THE BAND</h2></p>
	<p class="small">DAVID CLARK</p>
	<p class="small">L.I. PARAMOUNT MUSIC &amp; ENTERTAINMENT</p>
	<p><a class="small blue bold" href="mailto:[e-mail]">[e-mail]</a></p>
	<p class="small">[phone] Cell</p>
	<p class="small">[phone] x16, Office</p>
	</td>
	<td align="center" valign="top" width="50%">
	<p><h2><a class="yellow" href="shows.htm">Click Here for<br>INVISIBLE SUN DATES</a></h2></p>
	<p><a class="small blue bold" target="_blank" href="http://www.myspace.com/invisiblesunpolicetribute">Visit us at myspace</a></p>
	</td>
	</tr>
	</table>
</div>

You will see that the HTML is also much simplified by using <p> tags in preference to <span>....<br>, and a more conventional use of <h2>.

Multiple part-styles provide for good control whilst avoiding a large stylesheet.

You can have fun doing the top cell in the same manner, though you probably won't avoid <span> due to the colour changes within lines.

Have fun

Airshow

[Reesho]

Thank you so much Airshow for that reply and for the effort you put into detailing your idea!!! I've inherited this website and am trying to slowing revamp all the deprecated code. but I'm afraid that although I've been using css for a while I do it only part time and apparently am pathetically lacking in knowledge and experience. I've never even used "container", but I will study this and make an effort to rewrite the code.

I probably shouldn't even be using tables anymore right?

[Airshow]

Reesho,

Some people bend over backwards to avoid tables but there are still circumstances where they are pretty well unavoidable and sometimes just useful. I think your use is entirely justified and I certainly wasn't moved to try something different.

I hope you realise that "container" is just an id I gave to a containing div. I could have called it "wrapper" or "pencil_sharpener" or "george_w_bush". As long as the CSS refelects the chosen id, then everything would still work.

Sometimes you have more than one containing div on a page and you might choose to get inventive with ids, or you can simply call them "container1", "container2", "container3" etc.

There's seldom a unique answer to html/css formatting so don't worry too much that mine is very different from yours. If you ask 6 people, you would get at least 7 answers.

Good luck with it.

Airshow

[Reesho]

Thanks again Airshow for your patience and for being friendly and down-to-earth in your helpful responses. Not enough people take the time to be that way. I will work on the things you mentioned!

I posted the test page live here: http://www.invisiblesunband.com/index-test.html

It validates for html 4.01 and CSS 2.1

[Reesho]

The simple solution to this problem (in case anyone is interested) was, in my case, to get rid of the bg images in the problem areas (get rid of the h1, h2, & h3 ids) and simply put the background image instructions in the main body style with a repeat-y top center thus:

body {
	background: #000000 url(images/Gradient_BG-800.jpg) repeat-y top center;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

[Airshow]

Cool :cool: