Beyond Paper

Three Dimensions on a Web Page

This is an interesting way of building a web page.  Check out Silverback.  The vines at the top are actually three images: bg-rear.jpg, bg-mid.png and bg-front.png.

The result is a neat look of depth which could actually be taken further - with other images or text sandwiched in layers from “front” to “back”.  Here is the css involved:

body {
	background: #d3ff99 url(../images/bg-rear.jpg) 20% 0 repeat-x;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family:  Helvetica Neue, arial, sans-serif;
	font-weight: bold;
	color: #839966;
}
#midvines {
	background: transparent url(../images/bg-mid.png) 40% 0 repeat-x;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	height: 600px;
}
#frontvines {
	background: transparent url(../images/bg-front.png) top right repeat-x;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	height: 600px;
}