How can I extend the background of an element beyond its container?

Question

I have a div that contains an h3 tag, and i want the h3's background to extend beyond the containing div tag to the edge of the page. Is there a way to do this in CSS?
I considered absolutely positioning the h3, but I don't know the size from the edge of the screen to the edge of the div (where I want it to be) since the div is centered.

Answer 1

On this page, I used Firebug to change the question title's css.

#question-header h2 {
    background:lime;
    margin-bottom:-1000px;
    padding-bottom:1000px;
}

This is what happened:
_{(source: zastica.com)}

There is a #question-header div that only extends to the top of the question ("I have a div..."). The key is having a large padding-bottom and a large (negative) margin-bottom.

This also works for side-to-side backgrounds. You just have to make sure the container doesn't have overflow: hidden set.

Edit: To get this effect left and right, set:

html {
    overflow-x: hidden;
}

#question-header h2 {
    padding: 0 1500px;
    margin: 0 -1500px;
}

The html { overflow-x: hidden; } prevents the page width from getting really big due to the padding.