HTML Forum

**devilwithin** · 02-19-2006, 01:43 AM

I'm using Dreamweaver and I think what I'm looking for is html code. I've seen several sites that have the background color as a smooth flowing gradiant from top to bottom. I'm helping out a freind and he wanted the background to look like this - http://members.jcom.home.ne.jp/chuck-s/ - before the page loads there is like a chunky gradiant for the background. I think the smooth gradiant will look better but I honestly don't know how to code either. If anyone could help it would be greatly appreciated!

**chrishirst** · 02-19-2006, 03:58 AM

gradients can't be done in HTML. you need a thin slice of a colour gradient image then it should be set as the background colour for your document.

see http://www.tizag.com/cssT/background.php for more

**jmrouleau** · 02-19-2006, 11:12 PM

Make a image 1 pixel wide by the length you would like. Use an image editor that has a vector gradient tool so that it isn't choppy. If you would like it to be the background of your whole page use:

HTML Code:

<body style="background-image:url('image.gif');background-repeat:repeat-x">

If you would like the content to scroll over the image (image doesnt move) add 'background-attachment:fixed' to the style list.

**jyoz22** · 02-21-2006, 09:44 PM

Actually Gradients do exist in html.

If you want the background to be gradient add this to the <head> part of the doc.

<style>
body {filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', gradientType='1')}
</style>

notice the bold green # - change to 0 for vertical gradient.

learn more about this...
http://msdn.microsoft.com/library/de...s/gradient.asp

**vangogh** · 01:07 AM

jyoz is right though there is one problem. The code will only work in IE. It's proprietary microsoft code. If you know all of your visitors will be viewing yout site in IE it's great. Otherwise using a gradient image is the way to go. This is actually one of those things I wish other browsers could do. I suspect we'll be able to create gradients at some point with css alone.

**collyer_1** · 02-22-2006, 01:38 PM

You need to make an image that is one pixel (or a couple more) wide, and approximately 700 pixels tall. Then use this CSS style to add it to the background:

Code:

body {
background-color: #000;
background-image: url(image.jpg);
backgroung-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}

The background color should be the same as the bottom of your gradient. It will give the appearance of a smooth gradient from top to bottom, and it won't scroll.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!