Stretched header and footer bg in 960grid

Get Started
1

First of all, hello to everyone.

After I read a few books considering html, css, javascript, php and also million of web tutorials and used great sites like codeacademy and treehouse I decided to start practicing much more.

So, just like I expected I ran into a problem right on the beginning of crafting html/css layout.
I must say that I found same questions on stack overflow but it really didnt helped me at all.

I use 960 grid, 12 columns to center my content in the middle, basicly I want to achieve something similiar to “https://tutsplus.com/”, also I can see that this kind of website design is quite popular now. (content, logo, nav -> all centered) and colors streched through screen.

So this is my basic html


<body>
	<div id="container">
		<div id="header">
			<p id="logo"> LOGO </p>
			<ul id="nav">
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>
		
		<div id="content">

			<h1>Lorem ipsum dolor sit amet.</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus.</p>

			<h2>Lorem ipsum dolor sit amet.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, cum!</p>

			<h2>Lorem ipsum dolor sit amet.</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, aperiam?</p>
			
		</div>

		<div id="footer">
			<p id="copyright">&copy; Lorem Ipsum </p>
		</div>

	</div>
</body>

So, what do you think that is the best way using css to stretch header and footer background images while still keeping all content fixed with width of 960px . Any help is much or advice is appriciated. Please, don’t just give me pure code, because I really want to learn the theory behind this. I know there are a lot ways of doing this, but which one is “professional” ?
Thanks in advance.

2

anyone ? It could be that I didnt format my question in a best way, but im still newbie so please, I can’t move on until I resolve this issue… and I really see that this kind of design is very common today.

3

solved, used <header> and <footer> outside container and it works perfectly.
Weird that nobody didn’t answer, maybe the question was too much easy and obvious to solve, so apologize if its not useful at all.