can you do gradient page backgrounds?

[leftofcentre]

Hi I was wondering is there anyway to do gradient backgrounds on a webpage?

I would like to a do a vertical grandient as the background of a webpage. I know you could use a tiled background but the pages are of various lengths, so I would prefer to use a code solution.

Can you do it with CSS?

Thanks in advance.

Brian

[vgarcia]

By vertical gradient, do you mean color fading from top to bottom?

[leftofcentre]

By vertical gradient, do you mean color fading from top to bottom?

Yes. You have a solid colour at the top and it fades as you go down the page.

Brian

[TheOriginalH]

I'd guess if you had a div with a coloured background of specified size you could use the alpha transparency filter to create the effect? It is just a guess though, may have a play...

[TheOriginalH]

This has been discussed on the w3 - as long as 3 years ago: http://lists.w3.org/Archives/Public/...9Jan/0055.html

[leftofcentre]

This has been discussed on the w3 - as long as 3 years ago: http://lists.w3.org/Archives/Public...99Jan/0055.html

So its not possible to do yet?

Brian

[quenting]

So its not possible to do yet?

Brian

What i do is use a 1pix wide gif (of the height of the gradient i want to use). 1pix wide gifs are light even for large heights.
Then set it as background image, repeat-x and no-repeat-y (or the contrary). Finally set the background color to the "bottom" color of your gradient so that it doesn't make a break with the rest of your page if the window is too big for the size you defined for your gradient.

Quentin

[Zopester]

One proviso with the method descibed by quenting is that you should be aware of loading time when you use a 1px wide gif. Personally I would choose a gif at least 10px wide. That way you are cutting the number of times the browser has to load the same image by 10 times. Even though the resulting image is larger, doing this CAN speed up page loading.

Just a thought.

And in answer to your question, the gradient-fill property isn't in the CSS specs yet. Maybe slated for CSS3, but I wouldn't know. And even if it is, that doesn't mean it'll be properly supported by browsers for years!

[Lexi]

I just did a gradient going across the page but had gotten a tiling effect
I'd made a 400 width image and then a 25pix width image ...the latter is what tiled badly.....until someone told me how to fix it....
Make your gradient the size you want it to go down the page....where it ends take a color picker and pick the last color on the bottom edge of that gradient and use it for a smaller tiling image or just use it as a hex color in your code so half the page or so would be your gradient then the rest would be the matching color....
I'm sure if I can do this horizontally you can do the same vertically
Check out my images here
http://georgiainc.net/almaden_valleytest.html

Hi I was wondering is there anyway to do gradient backgrounds on a webpage?

I would like to a do a vertical grandient as the background of a webpage. I know you could use a tiled background but the pages are of various lengths, so I would prefer to use a code solution.

Can you do it with CSS?

Thanks in advance.

Brian

[leftofcentre]

What i do is use a 1pix wide gif (of the height of the gradient i want to use). 1pix wide gifs are light even for large heights.
Then set it as background image, repeat-x and no-repeat-y (or the contrary). Finally set the background color to the "bottom" color of your gradient so that it doesn't make a break with the rest of your page if the window is too big for the size you defined for your gradient.

Quentin

Hi quentin would it be possible to see your code or could you post a link to the page?

Thanks to all who got back to me.

Brian

[Kevin Yank]

The code would be:

<style type="text/css">
body {
  background-image: url(gradient.gif);
  background-color: black;
  background-position: top left;
  background-repeat: repeat-x;
}
</style>

In this example, gradient.gif would be a file with a width around 10 pixels and a height of, say, 800 pixels. The image should be a gradient fill ending with black at the bottom, to match the background color defined in the style sheet.

Positioning the background to the top-left of the window ensures that it will tile correctly in Netscape 4 and Internet Explorer 4, which do not support tiling to the left of the background position.

[wisbin]

I did a header with an image.png
This png format was made with a gradient black-2-transparent. On the background of that image I use a bg-color-style, which shines through if you use a browser of the gecko-type. IE replace the transparency with color #C1CACF by the way.

You should see spiderman twice if you browse with gecko/opera to my site: www.ict-id.nl

It's damn kewl, if you ask me I hope this PING thing will work soon on IE.

cheers!


PS on that page you find another example of gradient bg (look for the turtle)

[quenting]

Hi quentin would it be possible to see your code or could you post a link to the page?

Thanks to all who got back to me.

Brian

simple example here:
http://www.archangelcastle.com/test/example.html

Quentin

[htmlite]

This is probably an IE only thing...

http://msdn.microsoft.com/workshop/s...o/DXTidemo.htm

[Bill Posters]

Fwiw, a vertically fading gif (top > bottom) will be lower in 'weight' than a horizontally fading gif (left > right).

Due to the way the gif image data is built, compressed and stored, horizontal bands are better suited to its compression methods than vertical bands.
Consequently, vertically fading gifs should remain reasonably small as the image data will be compressed 'with the grain' rather than against it, so to speak.

Just thought I'd throw that possibly useless/useful piece of information in.

[Sh0t]

When svg support is wide spread, it will be a snap.