gradient background color using CSS

In this example we present how to add gradient color to your web page background without using image banner. In this case we use CSS properties one for Mozilla Firefox, one for Internet Explore and one for Chrome.

Code:

<html>

<head>
  <title>background attachments</title>
<style type='text/css'>
body {
filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b74b0', endColorstr='#2b446a');
background:
-moz-linear-gradient(50% 100% , #2b446a 20%, #4b74b0 100%) 
repeat scroll 0 0 transparent;
background:
-webkit-gradient(linear, 0 100%, 0 20%, from(#2b446a), to(#4b74b0));

height:800px;
</style>

</head>

<body>
<p> 
 gradient  background color using CSS
</p>
</body>
</html>

 

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

Related Posts to : gradient background color using CSS
Gradient Color in java -
Background color - mile200 -
change background color with RGB -
skymiles background color -
Follow window background color -
inherit background color from the parent element -
changing the background color for site main menu. -
Calculating image Gradient -
draw Round gradient -
Color and CSS -

Topic Tags

CSS Background

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com