Jump to content

[SOLVED] Background Gradient


smc

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.