Element background from far left to certain point across the page - html

Question

I've been presented with the following layout:
where:
A = header, width: 100%
B = page content, max-width: 960px; margin: 0 auto
C = footer, width: 100%
The problem I've got is with the H1. The design has a background to the H1 which comes in from the very far left of the screen and stretches all the way across to line up with the right hand side of the content below. If the browser window is less than 960px then obviously it just appears as a solid bar stretching across the whole screen.
I'm genuinely at a loss for how to even start this. I thought about some kind of negative left margin + padding left but without knowing a fixed size it's hard to rely on percentages to accurately line up the elements.
The closest I think I've come to a solution is to have a massive background image which is centred on the H1, or maybe on a container surrounding the H1. Not ideal as it's just a solid colour so to use an image goes against my moral judgement.
Any ideas? Here's the structure of the page:
<header>
<h1>This is my title</h1>
</header>
<article></article>
<footer></footer>
CSS
header,
footer {
width: 100%;
min-height: 100px;
background: #eee;
overflow: hidden;
}
article {
margin: 0 auto;
max-width: 500px;
height: 100px;
background: #ddd;
}
h1 {
margin: 30px auto;
width: 500px;
background: #bbb;
}

Answer 1

There are several ways you could try and do this.
A jQuery solution would provide the most accurate result, but it's abit heavy for this kind of problem, and I personally don't like using Javascript for something that's a CSS problem.
You could do some kind of trick with a background image, you might have to depending on your actual design, but as far as a single background colour, I'd probably solve the problem with an element positioned behind the header with a negative margin-top, and a set width of 50% (That way it should always remain hidden behind your header). All you'll need to do is match up its height and margin-top to blend it in with the header.
.header-botch {
background: #bbb;
height:37px;
width:50%;
margin-top:-67px;
}
http://jsfiddle.net/duFnR/1/
If for some reason you hate the idea of using a negative margin, you could position: absolute the element instead
http://jsfiddle.net/duFnR/2/

Answer 2

Why not use jQuery and calculate H1.width = (B offset left) + B.outerWidth() ?

Answer 3

A solution which doesn't involve images appears to be wrapping the H1 in something and applying a background gradient to that element, see the fiddle. I've made the H1 background green to make it more obvious which background colour is which.
Pros:
Ability to manage the colour in CSS
The height is variable based on the height of the H1 allowing for multi-lines if necessary
Cons:
The width must be set no greater than that of the H1, otherwise on very thin windows it will appear out the other side. Also it has the weird behaviour of disappearing completely once the specified width has been reached (not a problem when smaller because you won't see it disappear).
On very large windows, the width will not be enough and a gap will appear on the left of the H1.
Code
<div class="h1Wrapper">
<h1>This is my title</h1>
</div>
CSS
.h1Wrapper {
/*background: #bbb;*/
background-image: -webkit-linear-gradient(left, #BBBBBB 300px, #FFFFFF 300px);
background-position: center;
}
h1 {
margin: 30px auto;
width: 500px;
background: lime;
}