hide border if div is above

Question

I have a <div id="content"> with a border. Above this div is another <div id="header"> with some text. I would like to show text over border, but i don't want to display it.

For easier explanation i've posted my source code here: http://jsfiddle.net/4HSEn/ and this is what i would like to achieve:

Text will be dynamic and background will be gradient. So image is not a solution.

I know how to achieve this with fieldset and legend tags, but i'm looking for a solution with div or any other tag.

found something here: Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag? but for the legend was used background-color:#FFF, which does not help me very much :/

Answer 1

Untested theory, but perhaps you could give #header the same gradient background as body's background, then offset #header's background-position (using js) with the X and Y position relative to body?

Basically I'm suggesting a kind of masking effect.

EDIT: replaced #content with body, to be more in line with the OP's current code sample.