Articles/Images behind <hr />
References:
(November 15, 2003)
Lately wanted to apply a background-image behind a horizontal rule. While I figured that would be easy, it proved to be not. Different browsers simply disagree about nature of the thing. While Mozilla and related agree it's build out of borders, IE thinks it's an inline element. No need to point fingers, nobody really seems to know what it should be anyhow (as in ‘defined standard’, not talking about opinion). But, as a result, you have to target color property for IE, background-color + borders in other browsers, if you simply want to size and color it. If you want an image behind it, first thing to do is to set borders to 0, colors to background, then apply the image.
Now that could end up with something like this:
hr {
margin: 30px 0;
border: 0;
width: 100%;
height: 20px;
background: transparent url(gfx/hr.gif) center center no-repeat;
}
Which shows as:
Just the image, working in all recent browsers, just not in IE - it shows ‘borders’ in the systems UI colors, though they're technically not considered as such (by IE that is), around the whole area. Found a workaround, but it has some glitches. It only works in IE5.5+. Bug is IE only, so we're adding some IE only code, by means of the ‘filter’ value MS introduced. It will also make the css validator choke on your .css file.
hr {
margin: 0;
border: 0;
width: 100%;
height: 50px;
background: transparent url(gfx/hr.gif) center center no-repeat;
filter: alpha(opacity=100, finishopacity=0, style=3);
}
Which shows as:
Couple of notes explaining what's done and what limits are:
- Like said, IE5.5+ only;
- ‘Style=3’ is essential, tells a rectangular opacity is to be applied, from center (no opacity, or ‘opacity=100’ (percent visible)) to outer borders (full opacity, or ‘finishopacity=0’);
- This is practically dictating to set background-image to center of area, so it's not affected by opacity, or less at least;
- Adding to that, it advisable to remove margins and set height of <hr /> to at least twice the size of image, to avoid as much transparancy effects on the bitmap (or maybe you can do something nice with it). Effectively, that also means there will be a lot of space above and beneath image, can't do without…