Gradient Background for Web Page

[bnc123]

I would like my web page to have a gradient background. Now I did a search and came up with the famous Background Fader Script. However, this script has an animation between many colours.

What I want is a simple steady gradient between two colours. No animation, no fancy stuff. I can't seem to find one like that.

Can somebody throw some light on this? Please don't ask me to use the same script, but increase the time delay to 9999. That would be cheating and a waste of a good script. I also would not like to use the IE filters, as it will not work on other browsers that are gaining popularity.

 

[BabyJeffy]

I would look at crafting an image to do this for you... 1px wide and as long as you feel you'll need. Then repeat is in the X axis as the background of either the body or a container.

This will then work on all browsers regardless of whether Javascript is enabled or not.

If you really don't want to use an image, then how about you post what you've got working so far. We'll be able to help you with specific problems you are experiencing, but be aware this isn't a "free script shop" where we custom write Javascript for you.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[BillyRayPreachersSon]

I can't seem to find one like that.

You didn't look very hard, then. Suggest you check out my FAQ, "Creating a colour gradient background without images" which has been in place since May this year.

faq216-5889

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bnc123]

Thanks Dan,

I took your script and converted into a simple two colour gradient.

Have a nice day.

 

[BillyRayPreachersSon]

No conversion needed - just don't include the last two colour sets.

Funny - I needed a gradient routine today, and new instantly were to look ;o)

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisRChamberlain]

Dan

How about amending your FAQ or creating another to illustrate how to create a two colour gradient?

FAQ184-2483 - answering getting answered.​

Chris
PDFcommander[sup]tm[/sup].net
PDFcommander[sup]tm[/sup].com

 

[BillyRayPreachersSon]

Fair comment - will do that shortly.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bnc123]

Well, here I am again.

I have amended the javascript as follows, for a gradient of two colours only:

    <!--

        // fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
        // fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
        // bandHeight = height of each colour band
        // fadeSteps = number of colour bands used for the gradient (should be at least 2)
        function createGradient(fadeFromColour, fadeToColour, bandHeight, fadeSteps) {
            // calculate stepped colour values for each band
            var colourSteps = [fadeFromColour.concat()];                // ensure first colour is the start colour
            for (var bandLoop=1; bandLoop<fadeSteps; bandLoop++) {
                colourSteps[bandLoop] = [];
                for (var rgbLoop=0; rgbLoop<3; rgbLoop++) {
                    colourSteps[bandLoop][rgbLoop] = Math.round(colourSteps[bandLoop-1][rgbLoop] + ((fadeToColour[rgbLoop] - colourSteps[bandLoop-1][rgbLoop]) / (fadeSteps - bandLoop)));
                }
            }

            // now draw each band
            for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
                document.getElementById('fadeBands').appendChild(aDiv = document.createElement('div'));
                aDiv.style.height = bandHeight + 'px';
                aDiv.style.top = (bandHeight * bandLoop) + 'px';
                aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
            }
        }

        function drawGradient() {
            createGradient([255, 255, 255], [255, 246, 198], 10, 50);
        }

    //-->

I have put the CSS stuff in my style.css. The script works just fine.

However, I would like the gradient in vertical bands and not horizontal.

Can you please show me how to do this? I am sorry to bother you, but I am just no good at Javascript. I did check out your script in the FAQ, but can't seem to understand anything.

Thanks.

 

[BillyRayPreachersSon]

You need to revisit the FAQ. I updated it some time ago to handle vertical bands.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bnc123]

So this gradient script, can it be worked only with the BODY tag or can it also be worked with other tags e.g. TABLE tag. I tried to give a table a gradient background using this script, but did not succeed.

Any hints?

 

[BillyRayPreachersSon]

My code puts the bars inside the "fadeBandsV" or "fadeBandsH" div elements, depending on whether you are using a vertical or horizontal gradient.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]