Table background effect like this site?

MOSTAGHASSI
MOSTAGHASSI used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
Commented:
Tony van SchaikFront-end Developer

Commented:
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
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
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks for all comments.
Tony van SchaikFront-end Developer

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

Author

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial