Multiple BG?

programming web dev
1

UPDATE
So I’ve updated the HTML & CSS to what I have now. Basically I made the header the top image and just repeated the background.

But now if I shrink my browser size (to show for 1024 for example) the backgrounds get all wonky. Also the background doesn’t fit 100% it’s like a pixel off and I can’t figure out why. thoughts?

I’m also assuming you guys need to see BG’s so I’ve attached the header bg and the page bg.

----/end update

I tried to see if this was already posted, but I’m not exactly sure how to phrase it so hopefully someone can help!

I’m building a site (as you can see in the attached image) I have what’s ABOVE the black line as the body bg. It has no-repeat on it.

Now, everything below the line needs to be repeated vertically.

I tried to do it in a container div but that didn’t work, unless I’m doing it wrong.

Here’s the code I have ATM:

body {
	font-family: HelveticaNeue, "Helvetica Neue", Arial, Verdana, sans-serif;
	background: url(images/bg.png) top center repeat-y;
}


img {
	border: 0px;
}

#container {
	width: 1077px;
	margin-left: auto;
	margin-right: auto;
}

#header {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 0 0 60px;
	width: 1077px;
	height: 200px;
	background: url(images/header_bg.png) no-repeat;
}

#navcontainer {
	padding: 10px 0 0 0;
}


#nav a {
	color: #fff;
	text-decoration: none;
}

#nav a:hover {
	text-decoration: underline;
}


#nav li {
	color: #fff;
	display: inline;
	list-style-type: none;
	margin: 0 20px 0 0;
	text-transform: uppercase;
	font-weight: bolder;
	font-size: .9em;
}



		




<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>The Punch In - Your Television News Service</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
	<div id="container">

	<div id="header">
		<a href="http://www.thepunchin.com"><img src="images/logo.png" title="The Punch In" /></a>

	<div id="navcontainer">
		<ul id="nav">
			<li><a href="#">News</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Advertising</a></li>
			<li><a href="#">Tips</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
	</div>


	<div id="left">
	</div>

	<div id="right">
	</div>

	<div id="footer">
	</div>

	</div>

</body>
</html>