Web 2.0 Style two Side Background, Dark to Light Effect

Submitted by n8coder on Fri, 05/01/2009 - 18:09

This is a demo page. We use two divs and two background images for left and right. And we use background-position attribute of css especially to align the right background to right of page. Dont forget to tell browser how bg should repeatet. Even if the page is resized, we have the same effect on the display. Demo and More

Left background image:

Right background image:

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Web 2.0 Style two Side Background, Dark to Light Effect</title>
	<style type="text/css">
		*, body, div { top: 0; left: 0; margin: 0; padding:0; }
	</style>
	
</head>
<body>
<div style="background: url(background_effect_left.png) repeat-y; background-position: left;">
	<div style="background: url(background_effect_right.png) repeat-y; background-position: right;">
	
	<div style="padding: 0 200px;"><br /><br />

	<h1>Web 2.0 Style two Side Background, Dark to Light Effect</h1>
	<br /><br />
	<p>
	This is a demo page. We use two divs and two background images for left and right. And we use background-position attribute of css especially to align the right background to right of page. Dont forget to tell browser how bg should repeatet. Even if the page is resized, we have the same effect on the display.
	<br /><br />
	Left Image:
	<img src="background_effect_left.png" style="border: 1px dotted red;" />
	
	<br /><br />
	Right Image:
	<img src="background_effect_right.png" style="border: 1px dotted red;" />

	
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</div>

	
	</p>

	</div>
</div>
</body>
</html>

Bookmark/Search this post with: