<p>I have a gradient image as a background for a table header(9x18pix). This image is called through a selector class. When the header content grows to 2 lines(vertical height increases), the bg image is tiling vertically and looks ugly. How can I stretch the bg image vertically without tiling?</p>

You can't stretch it. Well not without some nasty CSS hacks, that will not really work in all available browsers. I wouldn't use them (unless your HTML code only targets a single browser, e.g. if it's a page for internal use and the browser being used is known). You can make it repeat in just one direction, though. This is what you usually want when having a gradient.
```
```
background-repeat: repeat-x;
```
```
Here's an example image:
Here's HTML code that uses it
```
```
<html>
<head><title>Gradient Test</title>
<style type="text/css">
    th {
        color:brown;
        background-image:url(http://img222.imageshack.us/img222/6586/fillhz2.png);
        background-repeat:repeat-x;
        margin: 0;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>One line</th>
            <th>Three<br>lines<br>of text</th>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </table>
</body>
</html>
```
```
It will repeat, but only within one direction. Usually a gradient can be safely repeated within one direction, there is no need to stretch it.