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 add numbered list style in div tag

    Flex 4 How to set background image to VBox?

    How to use icon fonts

    How to toggle css visibility with Javascript

    How to remove IconTabFilter icons using css?

    how to get value of colors from CSS

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    css + thymeleaf - How to auto-adjust displayed screen size?

    How to create Box Shadow rollover and hover css navigation?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    How to apply an image to a CSS ordered list in WordPress?

    How to vertical center ordered list-navigation

    How can I use Javascript to allow navigation between sections using keyboard shortcuts?

    how to let -ms-grid adaptive width layout in win8 html and javascript metro app?

    How to visually identify the viewbox of a SVG with CSS?

    Bootstrap Icons not showing in published ASP.NET MVC application

    How can I hide page elements till an AJAX call completes?

    How to get a reference to id=“xxx.yyy” in CSS?

    how to fade-out/blur div's borders with css?

    Wordpress- How do i change the default font of navigation menu?

    Using CSS to show gradient as well as an image

    How can I be sure that a website is responsive by only looking the code?

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How can I stop an CSS animation from interfering with a CSS transform transition?

    CSS: how to layout 3 columns, 2 are optional

    How to layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    How to get resultant HTML after executing all scripts?

    Why isn't my div content showing?

    How to make a frame around CSS component from a picture source

    How to style HTML compatible tags in XSL definition using extenal CSS?