asked on

Table background effect like this site?

Hello all,
Please let me know that how can i make on a table background an effect like this site:
musicema.com ?
My mean is the light gray line on table background(maybe call it hatching ).

Thanks

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tony van Schaik

You can create a gradient in Photoshop. And use this HTML and CSS example i made.

<!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=utf-8" />
<title>Gradient Background</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<style type="text/css">
body, html {
	background:#fff url(gradient-bg.jpg) repeat-x top left;
	font:12px normal "Segoe UI", Tahoma, Arial;
}
 
#wrapper {
	width:960px;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	background:#fff;
}
#content {
	padding:20px;
}
p {
	padding-bottom:20px;
	line-height:24px;
	}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac   nulla dictum erat ultricies congue at non enim. Fusce aliquet, urna in dignissim   elementum, nibh dui condimentum leo, vel tincidunt ipsum diam id sapien.   Maecenas fringilla justo et urna euismod non rutrum enim tempus. Nam faucibus   lectus eget dolor gravida mollis. Praesent non nulla turpis. Etiam vel   consectetur purus. Vivamus sem tortor, dictum in mattis sit amet, dignissim ut   lectus. Nam augue nulla, facilisis vitae varius laoreet, ullamcorper quis dui.   Sed velit libero, lobortis ac rhoncus vitae, pharetra in odio. Etiam convallis   risus et nunc lacinia nec congue quam accumsan. Suspendisse congue neque quis   purus molestie in eleifend magna ullamcorper. Integer ac est eget nisl   ullamcorper molestie vestibulum vitae mi. Cum sociis natoque penatibus et magnis   dis parturient montes, nascetur ridiculus mus. Maecenas cursus iaculis ante et   tristique. Praesent id nunc eu tellus ultrices mattis. </p>
  <p>Integer nec neque ipsum, a pulvinar lorem. Nam imperdiet magna eu urna rutrum   id accumsan nulla cursus. Morbi luctus ligula sed sapien adipiscing venenatis.   In euismod quam nec lectus sagittis venenatis. Praesent posuere gravida risus at   varius. Curabitur aliquam dapibus condimentum. Ut in tellus elit, et cursus   lacus. Donec a pretium magna. Cum sociis natoque penatibus et magnis dis   parturient montes, nascetur ridiculus mus. Sed tincidunt iaculis augue sit amet   volutpat. </p>
</div>
</div>
</body>
</html>

Open in new window

gradient1.jpg
gradient-bg.jpg

racmail2001

download the attached file and use this code below

<table cellspacing="0" cellpadding="0" border="0" bgcolor="#e1e1e1" background="bgcenter.gif">
<tr><td>Hello world</td></tr>
</table>

Open in new window

bgcenter.gif

MOSTAGHASSI

ASKER

Thanks for all comments.

Tony van Schaik

No split points i gave you the exact explantion on how to do it, with images also.

MOSTAGHASSI

ASKER

Hello,
No ,because i didn't want the effect of "Gradient background" i wanted the effect that was light gray line in background as Kravimir found it . using a tile as background.