Question

I have a webpage where I have hr tags to separate sections in page.

I am applying an image as background to hr tag using css.

The hr tag takes 100% width but image does not occupy entire tag.

How to force image to occupy the entire area occupied by hr tag?

Is there any stretching property available to stretch image end-to-end?

Below is the code:

hr
{

    background: url("images/new/edge-top.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    height: 10px;
    margin: 0 auto;
    width: auto;
    clear: both;
    border: 0 none;
    display: block;
    padding: 0px;

}

Check the resulting image here:

Answer 1

CSS3 has some new options for that. Try

background-size: x% x%;

Here you can read the Spec for the new background-module.

Note however, that this is very poorly supported in IE! (anyone surprised?)