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 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")
    }