How To Stretch A Background Image in a DIV

I have a background image in a DIV that I am using as a header. I know that I can set it to repeat, but this makes it look strange because of the image isn't meant to repeat. Is there any way that I can set it up to stretch so that it fills the entire box? You can see the header by going here.

http://philscomputer.dyndns.org:443/


Here is my CSS code in case you need it

/* Header */

#header {
	width: 100%;
	height: 120px;
	background: url(img/image002.gif) no-repeat;
	background-size: 100%;
}
/* Navigation */

#navigation {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	




ul.HorizontalButtons {
  margin-left: 0px;
  padding-left: 0px;
	margin-right: auto;
	margin-left: auto;
	

}
 {word-spacing: -.5em;
}


}
img{
border: 0;
}
ul.HorizontalButtons li {
  display: inline;
  background-color: #;
  border-style: hidden;
  border-width: -7px;
  margin:  -7px;
  padding: -7px

}
}
ul.HorizontalButtons li a {
  text-decoration: none
}
ul.HorizontalButtons li a:hover {
  background-color: #
}
/*Content */

#content {
	text-align: center;
	font-family: Papyrus;

	color:#76923C
	font-size: 18px;
	width: 100%;
	height: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-size: 18px;
	font-style: normal;
}

/* Body */

body {background-color:#E0E0C2} 
/* Header */

#header {
	width: 100%;
	height: 288px;
	background-image: url(image002.gif);
	background-repeat: repeat-x;
	float: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	position: relative;
}

/* Footer */

#footer {
	clear: both;
	width: 760px;
	height: 40px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: url(images/img05.gif) no-repeat left top;
	text-align: center;
	font-size: smaller;
	color: #52640A;
}

#footer a {
	color: #003300;
}

Code (markup):

 

Why not just make the image bigger? Or even just center it and it should be alright....

 

Agreed either make the image bigger or center it in the screen. Also if the image was part of the markup (not as a background image inside the CSS) you could change it's size via height and width attributes.

By the way you should try and avoid Layers for your layout, and just let things flow normally. Then use margins, padding, and floats to get things to appear where you want.