I see alot of really great websites which have a sort of theme to them.

 

For example, the background of the top of the page will be clouded with a sun and such and it will span the width of your window, then when the content ends, the background at the bottom will be a grassy surface with the footer details etc.

 

I can't find an example at the moment, however, I'm curious how to achieve this effect as it produces some really nice results.

You could use two images. The header would either have enough width for most browser window resolutions, say 1280px, or you could position it with position: absolute; width: 100%; top: 0; and it would expand or shrink with the window resolution but the height would vary in proportion (which is what you want for the image, but it makes it impossible to connect with a separate footer in all resolutions).

 

Similarly for the footer image with bottom: 0.

 

Two images might result in a gap between them, or an overlap, so many people use one combined image but then it would normally have a fixed height and content would be placed accurately on top.

just have bg1 = normal background, bg2 = absolute, bottom, fixed width and height and then content absolute too. + set z-index.

Wouldn't the second background over write it?

Hi,

 

I was wondering if what you were asking is the same as what I've in my mind.

 

I have seen websites doing like this (see attachment).

I hope you guys understand what I've meant.

Basically, it's like the blue part and the white part is an image, while the green part and the white part is also an image.

Usually, I find out that they don't usually connect them together.

They put another "expandable" image, having the same width as the blue part, so that whatever text they need to type in, the image will stretch. So, it's like 3 images put together (sorry about the picture where I drew two images combined together).

 

I do hope that dt17's question is same like mine as I would like to learn it.

give me 2 mins ill knock something up

Heres one way... not the best but its off the top of my head

 

/* CSS Document */
* {margin:0; padding:0;}
html { height:100%;}
html>body{height:100%;}

html>body>#wrapper {
position:relative;
maring:0 auto;
width:100%;
z-index:1;
background-color:#0099CC;
height:100%;
padding-top: 50px;
}
html>body>#wrapper>#main {
position:relative;
z-index:3;
margin:0 auto;
width:80%;
background-color:#F2F2F2;
height:94	%;
}
#footer {
position:absolute;
bottom:0;
left:0;
z-index:2;
background-color:#00CC66;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

	<div id="main">

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sit amet tellus mollis mattis vel id libero. Aenean sit amet sapien in purus ultricies molestie. Vestibulum iaculis velit vel mauris consequat in cursus velit vulputate. Cras ac molestie tortor. Fusce ultrices dolor id nunc commodo id faucibus nisl scelerisque. Quisque hendrerit faucibus nibh et venenatis. Maecenas ultricies dolor et velit pharetra ut tempus diam tincidunt. Nullam hendrerit blandit metus vel accumsan. Vivamus nec lorem est, ac commodo enim. Nullam at libero non quam tristique iaculis. Maecenas purus lacus, venenatis vel dictum et, vestibulum sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id elit convallis risus rhoncus placerat. Proin at mauris orci, in tempus ante. Quisque tempor feugiat ullamcorper. Phasellus ac imperdiet nunc. Aenean congue pellentesque lectus sit amet ultrices.
		</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sit amet tellus mollis mattis vel id libero. Aenean sit amet sapien in purus ultricies molestie. Vestibulum iaculis velit vel mauris consequat in cursus velit vulputate. Cras ac molestie tortor. Fusce ultrices dolor id nunc commodo id faucibus nisl scelerisque. Quisque hendrerit faucibus nibh et venenatis. Maecenas ultricies dolor et velit pharetra ut tempus diam tincidunt. Nullam hendrerit blandit metus vel accumsan. Vivamus nec lorem est, ac commodo enim. Nullam at libero non quam tristique iaculis. Maecenas purus lacus, venenatis vel dictum et, vestibulum sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id elit convallis risus rhoncus placerat. Proin at mauris orci, in tempus ante. Quisque tempor feugiat ullamcorper. Phasellus ac imperdiet nunc. Aenean congue pellentesque lectus sit amet ultrices.
		</p>

	</div>

	<div id="footer">

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sit amet tellus mollis mattis vel id libero. Aenean sit amet sapien in purus ultricies molestie. Vestibulum iaculis velit vel mauris consequat in cursus velit vulputate. Cras ac molestie tortor. Fusce ultrices dolor id nunc commodo id faucibus nisl scelerisque. Quisque hendrerit faucibus nibh et venenatis. Maecenas ultricies dolor et velit pharetra ut tempus diam tincidunt. Nullam hendrerit blandit metus vel accumsan. Vivamus nec lorem est, ac commodo enim. Nullam at libero non quam tristique iaculis. Maecenas purus lacus, venenatis vel dictum et, vestibulum sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id elit convallis risus rhoncus placerat. Proin at mauris orci, in tempus ante. Quisque tempor feugiat ullamcorper. Phasellus ac imperdiet nunc. Aenean congue pellentesque lectus sit amet ultrices.
		</p>

	</div>

</div>

</body>
</html>

Like yy1993 says, you can use three images

Top blue white blue with a blue top tied to the top with top:0;

Bottom green white green with a green bottom tied to the bottom with botttom: 0;

Middle just blue white blue with repeat-y and it fills any space in the middle.

Thanks guys, but if dt17's looking for this, I may need helping doing this too.

My positioning of things are really lousy.

/* CSS Document */
* {margin:0; padding:0;}

#wrapper {
position:relative;
maring:0 auto;
width:100%;
background-color:#0099CC;
height:100%;
padding-top: 50px;
}
#wrapper #main {
position:relative;
z-index:3;
margin:0 auto;
width:80%;
background-color:#F2F2F2;
height:94%;
}
#footer {
position:relative;
z-index:1;
background-color:#00CC66;
padding-bottom:30px;
}
#footer2 {
width:80%;
margin: 0 auto;
z-index:2;
background-color:#F2F2F2;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

	<div id="main">

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sit amet tellus mollis mattis vel id libero. Aenean sit amet sapien in purus ultricies molestie. Vestibulum iaculis velit vel mauris consequat in cursus velit vulputate. Cras ac molestie tortor. Fusce ultrices dolor id nunc commodo id faucibus nisl scelerisque. Quisque hendrerit faucibus nibh et venenatis. Maecenas ultricies dolor et velit pharetra ut tempus diam tincidunt. Nullam hendrerit blandit metus vel accumsan. Vivamus nec lorem est, ac commodo enim. Nullam at libero non quam tristique iaculis. Maecenas purus lacus, venenatis vel dictum et, vestibulum sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id elit convallis risus rhoncus placerat. Proin at mauris orci, in tempus ante. Quisque tempor feugiat ullamcorper. Phasellus ac imperdiet nunc. Aenean congue pellentesque lectus sit amet ultrices.
		</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sit amet tellus mollis mattis vel id libero. Aenean sit amet sapien in purus ultricies molestie. Vestibulum iaculis velit vel mauris consequat in cursus velit vulputate. Cras ac molestie tortor. Fusce ultrices dolor id nunc commodo id faucibus nisl scelerisque. Quisque hendrerit faucibus nibh et venenatis. Maecenas ultricies dolor et velit pharetra ut tempus diam tincidunt. Nullam hendrerit blandit metus vel accumsan. Vivamus nec lorem est, ac commodo enim. Nullam at libero non quam tristique iaculis. Maecenas purus lacus, venenatis vel dictum et, vestibulum sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id elit convallis risus rhoncus placerat. Proin at mauris orci, in tempus ante. Quisque tempor feugiat ullamcorper. Phasellus ac imperdiet nunc. Aenean congue pellentesque lectus sit amet ultrices.
		</p>

	</div>

	<div id="footer">

		<div id="footer2">

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sit amet tellus mollis mattis vel id libero. Aenean sit amet sapien in purus ultricies molestie. Vestibulum iaculis velit vel mauris consequat in cursus velit vulputate. Cras ac molestie tortor. Fusce ultrices dolor id nunc commodo id faucibus nisl scelerisque. Quisque hendrerit faucibus nibh et venenatis. Maecenas ultricies dolor et velit pharetra ut tempus diam tincidunt. Nullam hendrerit blandit metus vel accumsan. Vivamus nec lorem est, ac commodo enim. Nullam at libero non quam tristique iaculis. Maecenas purus lacus, venenatis vel dictum et, vestibulum sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla id elit convallis risus rhoncus placerat. Proin at mauris orci, in tempus ante. Quisque tempor feugiat ullamcorper. Phasellus ac imperdiet nunc. Aenean congue pellentesque lectus sit amet ultrices.			</p>
		</div>

	</div>

</div>

</body>
</html>

 

try that