how to make a h2 background image 'dynamic' in height as well

Question

I have a 1px wide by 35px high image, that I set as background for my h2 elements. The accompanying CSS is as follows:

h2 {
    background:transparent url(./images/h1_bg.gif) repeat-x left top;
    font-size:18px;
}

As a result, the background is set as the image no matter what the length of the heading is, as long as the heading fits in one line. If the heading spills over to next line, then image is not set as background for the wider area, as it repeats only in x direction. I think I need to create another image, example 1px wide by 60px high image and set it as background of the two-line heading. But I need some way to check if the heading is a two-line heading or not, so I can change the image background. How do I do that? Plus, is there some other way to accomplish this task?

Answer 1

You usually deal with this by just creating a very tall image, like 100 pixels or more. Hold the bottom row colour for the remainder of the height.

Answer 2

You can do this by using height.

  if($j("h1").height() > 30)
 {
  $j("h1").css("background","transparent url(./images/h1_bg_0.gif) repeat-x left top")
 }
  else
 {
  $j("h1").css("background","transparent url(./images/h1_bg_1.gif) repeat-x left top")
 }