A background image is displayed only by the element to which it is applied. You can't get it to span multiple elements. However, backgrounds are transparent, so applying a background image to an outer element will achieve the effect you're after.
I've done a simple adaptation of the Bayside Beat design that deletes the image of the Golden Gate Bridge from the HTML, and moves the hero div inside the <header> element like this:
<li><a href="index.html" class="thispage">Home</a></li>
<li><a href="#">Eating Out</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">Where to Stay</a></li>
<h2>Be Where It’s At</h2>
<p>San Francisco is one of the most exciting and vibrant cities on the planet. Bayside Beat is here to keep you informed of the best places to see, where to eat, what to do, and where to lay down your weary head after an action-packed day—or night—on the town.</p>
The CSS is then changed like this:
This results in the home page looking like this:
This displays the Golden Gate Bridge at the top of every page, but you could add a class to the home page's <body> tag to create separate styles for the home page.