Is it possible to set the HR tag to be an image rather than the ugly line that it is with CSS?

If so can you post how?

Thanks.

umm not sure if this would work, but:

hr {
display: block; /* it should already be a block element anyway, but hey */
width: 100%; /* expand right across the parent box */
height: 20px; /* change for the height of your image */
}

Originally posted by VolkNet
Is it possible to set the HR tag to be an image rather than the ugly line that it is with CSS?

If so can you post how?

Thanks.

- Use photostop (or paint) to make an 1or2 pixel long image and then use it with the widht you need..

Peace,

I have an image i just need to know what CODE to use in CSS that would display the image repeated when i type in a <hr> tag.


hr {
//what do i put here? Thanks
}

Try this.


hr {
display: block; /* it should already be a block element anyway, but hey */
width: 100%; /* expand right across the parent box */
height: 20px; /* change for the height of your image */
border: none; /* i think the default look is accomplished with borders.. */
background: url('/images/hr.png'); /* your image */
}

I appreciate the attempt but it didnt work.

I found you can do

hr{

color: red; /* or w/e color */

}

but thats the only thing i could find so far. :)

SOLVED! (Finally! YAY!)
lol.
here is the solution: http://www.sovavsiti.cz/css/hr.html


when calling hr tag:
<div class="hr"><hr /></div>

and the following CSS rules:

div.hr {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}

This will work in all major browsers (at least thats what it says) :)

Peace.