[SOLVED] Background Gradient

[smc]

Okay this is probably a really nooby question but I've never done it. How do I get a background gradient that extends the full height (and width) of the page?

 

Thanks!

[calabiyau]

Well there is no html css answer to that.  you would have to make the gradient in your photo editing program like photoshop.  assuming you mean a vertical gradient that transitions its color from top to bottom, you create a thin and tall image, like 5px wide by 600px high and apply your gradient to the image.  save the image, then in your css, set the body element to have a background image and apply repeat-x to it so that the image will repeat across the page.  also give the body element a background color equal to the color you have set for the bottom end point of the gradient image so if your page extends beyond the height of the image it will still look okay.  when you are creating the image, sometimes there will be a banding effect, which can look bad, so in photoshop you can apply a little bit of gaussian noise to smooth it out, although this sometimes makes it look less crisp.

[obsidian]

First of all, you'll need to use CSS. Secondly, the gradient itself will not extend the whole height of the page, but you can "fake" it with a background color that matches either the topmost or bottommost pixel (depending on what look you're after). For instance, let's say you have a gradient that is 600 pixels tall and 1 pixel wide. The top pixel is #355D80, and it fades into the bottom being #7E9CB8. Say you save that image as bg_grad.gif... you would set up a CSS similar to this:

body {
  background: url('bg_grad.gif') repeat-x top left;
  background-color: #7E9CB8;
}

 

That should be a start for you. Good luck.

[smc]

Thanks