Background fade 3

[NetworkGuy101]

Does anybody know how to make a background fade like on

http://www.macromedia.com

?

Thanks

 

[tgreer]

It's an image.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

http://www.brownfedora.com

Haiku workshop and community.

 

[cLFlaVA]

indeed. an image that is 1 pixel wide by 100 pixels tall, to be exact. It is then repeated horizontally.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[cLFlaVA]

http://www.macromedia.com/images/master/background.jpg

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[taylorantone]

Incidentally, any sort of gradiant image you see on a website is 99.9999% of the time an image too.

 

[cLFlaVA]

... because gradient styles are not yet widely supported.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[glenmac]

I use one too

http://lantzvillecomputers.ca

the image is

http://lantzvillecomputers.ca/back1.gif

Created it in Photoshop made a large image with a gradient then resized it to 5px wide. Easy


Glen

http://lantzvillecomputers.ca

 

[NetworkGuy101]

Well how does the fade effect happen. A 1 by 1 pixel would repeated would just be the same color for the whole background correct?

 

[glenmac]

You use a thin but long image, I use 5px by 800px. If you look at the image link I posted you will understand better, I hope.

Glen

http://lantzvillecomputers.ca

 

[NetworkGuy101]

Thanks,

I took what you said but I did this to it

body {
background-image: url(/Images/backtest.png);
background-attachment: fixed;
}

That way the fade stays fix through out the whole page.

 

[NetworkGuy101]

Check it out @

http://www.jbdanford.com

Thanks for the help. Although is there a way to stretch the image so it doesnt have to be fixed. Like 100% height?

 

[glenmac]

Glad to be of help thanks for the star.

Glen

http://lantzvillecomputers.ca

 

[glenmac]

Although is there a way to stretch the image so it doesnt have to be fixed. Like 100% height?

Not that I'm aware of. Good question though, Anyone??? Maybe You cFlava, you are the top MVP!!!!!.

Glen

http://lantzvillecomputers.ca

 

[cLFlaVA]

100% height is not possible in CSS unless the object whose height you are defining has a parent with a set height. For example, if you have a <div> with a height of 600px, then you can set an element inside that div to have a height of 100%.

One way of "setting 100% height" is to have a JS function called from the onload event that will test for available width and resize an image or element based on that size.

Take a look at

http://www.alistapart.com/'s

home page for a pretty cool background fade effect. I think it's more what you may want.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[Foamcow]

When doing blends like these as backgrounds I make a very long thin one and fix it to the bottom of the window.
Tends to work quite nicely, especially if the image is something like 2000px high.
Otherwise set the background colour to be the "end" colour of the blend so you see no join.

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time

 

[imstillatwork]

I try not to make the image any more then a few hundren pixels tall, and then use a solid color background to finish the page off like:

http://dev.nwtec.com/freeman/

 

[phpgramma]

speaking of the macromedia site, how did they do the transition "wipe" effect on page load? javascript or other?

 

[glenmac]

This works in IE

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(duration=2,transition=7)">
<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(duration=2,transition=6)">

# 6 is right to left and #7 is left to right.
Try this site for info

http://www.pageresource.com/dhtml/jtut2.htm

Glen

http://lantzvillecomputers.ca

 

[taylorantone]

Odd that I don't get page transition effects on Macromedia's site, and I'm using IE.

 

[imstillatwork]

I always have page transitions turned off in IE. kind of annoying they are.