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


Tags: css,image

Problem :

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?



Solution :

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

    CSS Howto..

    How to center in
    without text-align?

    Javascript/CSS- how to change the colour of a textarea scrollbar without a third party JS library?

    How to align an icon to the right of content

    How add symbol in CSS for element?

    How to let the user choose a page number?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    How to edit HTML with CSS? [closed]

    How to trigger self hover on child element

    How to place an image between horizontal list items

    How to reload CSS after ajax call

    How To Center Align Menu Through CSS?

    How can I reduce the space between two elements in CSS?

    how to add inline css to rails link_to helper

    How to use CSS absolute position inside a scrollable div element

    How to align text next to a “div” in HTML/CSS?

    How to center-zoom with responsive images without affecting the image size?

    How to center without the
    tag using CSS?

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    Why is the icon shown in some browsers while other it is not

    How to make your website works on a projector?

    How to select Bootstrap's collapsed menu button with CSS

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    how to avoid css jitters while applying css border with hover pseudo class

    Jquery Cycle Plugin issue with extending the slideshow “outside” the page boundary

    Showing required fields by bolding

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    how to create a half bordered circle(only css, not js or even svg)?

    How to shrink the menu when mouse hover on a link using jquery

    How to apply css to top level element only

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text