Code Answer: Table header background image tiling vertically

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?

From stackoverflow

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.
First of all, I'm assuming you're using CSS to place this background image. You probably need to clarify that part of your answer.

I don't believe there is a css function that you can use to make your background image stretch. As Mecki says, you can use background-repeat to tile the image horizontally, but that's not going to deal with the header expanding beyond the height of your original tile.

The simplest way to deal with this would be to just make your background big enough to fit a couple of lines or more.

So if you make the background say 40px tall or perhaps slightly larger, your not going to add a huge amount in terms of file size, but then you have a more flexible design.

In general as far as layout and graphics go, it's always best to build in a bit of flexibility, to cope with browser inconsistencies and different user needs.
Hey Shivanand,

The problem you have here is your background is repeating, Mecki's comment is correct and should fix your problem, background images will always repeat unless you state which way it should repeat, if at all.

Here's a link to all the different CSS background properties that may help you out a little: http://www.w3schools.com/css/css_background.asp
Alternatively you can set the background colour of the container to the same colour as the last line in the gradient. This way the end of the gradient image will be invisible.

Shivanand : That was really helpful. Thanks a lot!!
Gradient Test th { color:brown; background-image:url(http://img222.imageshack.us/img222/6586/fillhz2.png); background-repeat:repeat; margin: 0; } One line Three
lines
of text Data Data

Code Answer

Thursday, February 17, 2011

Table header background image tiling vertically

0 comments:

Post a Comment

Blog Archive