Saturday, October 25, 2008

Gradient background using CSS

Hi

I found this technique very cool as it lifts the look and feel of the site. There are some amazing things you can do with CSS, just have to play right. The trick is having correct dimension of your image and its matter of applying repeat-x in CSS. Create image about 2 px wide and 1200 px in height and apply liner gradient effect. 1200 px will work perfectly for monitor size: 1024 px with out replicating on y-axis.

Apply the image in the body {} of you CSS

e.g.


body {
padding:0;
margin-right: 0;
background-image: url(images/body_bg.jpg);
background-repeat: repeat-x;
background-position: 0;

}

No comments: