Table header background image tiling vertically

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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