Hi all,
I would like to do something simular to the following websites background http://www.visitsingapore.com/publis...l/en/home.html
I want a gradient black and red at the top and a red below it. I know one way which is make the image 1000px height if the page is 1000px by repeating the pic, but I have multiple pages with different heights.

Set it the same way they do.

body {	
	font: 11px arial, helvetica, sans-serif;
	color: #000000; /*Font color*/
	background: #FFFFFF url(../Images/misc/bg_main01.gif);
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

PLUS

#Wrapper100{
	width: 100%;
	background: url(../Images/misc/bg_main01.jpg) repeat-x;
}	

#Wrapper {
	width: 811px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */

}

Have a look in the source code to see how they use the two "wrapper" elements.