How could we implement diagonal gradient of a PSD into our css xhtml code?

First of all, I want to tell you guys that I'm not a designer and not a css/xhtml coder as well. I'm asking this question for one of my friend, He is working on a site which has diagonal gradient (it basically means that the gradient is in both of the direction X and Y), So he is getting problem in slicing the image for it so tha开发者_如何学编程t he can fill the sliced image in background in such a way which will maintain the gradient in X and Y both direction.

So, It is like, If gradient is in X direction only than we generally slice a vertical 1px width image. Similarly, If gradient is in Y direction only then we generally slice a horizontal 1px height image. But What if the gradient is in both of the direction X and Y? In this case how will we slice the image or how could we implement it in CSS/XHTML?

Thanks A lot

Pukhraj

Your friend should consider doing this with CSS, as long as he/she is okay with it working only in modern, non-IE browsers.

Example: http://jsfiddle.net/h9rpE/2/

html, body {
    font: bold 20px Helvetica, Arial, sans-serif;
    height: 100%;
}
body {
    background: white -moz-linear-gradient(135deg, black, white) fixed;
    background: white -webkit-gradient(linear, left top, right bottom, from(white), to(black)) fixed;
}

Or you could use background-size:

Example: http://jsfiddle.net/rLttj/2/

body {
    background: white url('http://dropbox.smallparade.com/grad.jpg') no-repeat fixed;
    -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;
}

Simple. Don't splice it at all. You could simply take the background image as a whole and use CSS' background directive in your body tag. Only issue I could see you running into is the width of your gradient image. If it's (for example) 1024px wide and the client is rocking 1920px they'll see a lot of white. It's a little hard to answer without knowing who your monitor demographic is and your layout.