Fading background

Forum Moderators: not2easy

Message Too Old, No Replies

Fading background

Can it be done?

southernpaw

2:26 am on Sep 23, 2001 (gmt 0)

Can anyone please tell me if it is possible to fade one background into another. I am trying to make a webpage for my wife at [angelfire.com...] and I want to take the current background picture and make it fade into another picture of her about a minute after the page loads. Is that possible, and if so, how. Thanks alot in advance!

john316

2:48 am on Sep 23, 2001 (gmt 0)

You can use an animated gif for the background. I don't think it will work in netscape, but it works in IE. Your other option is some sort of timeline using layers.

southernpaw

2:57 am on Sep 23, 2001 (gmt 0)

How do I do a timeline using layers?

Marshall

3:57 am on Sep 23, 2001 (gmt 0)

If it doesn't actually have to fade, you could use a meta-refresh tag:

<meta http-equiv="Refresh" content="10; URL=http://www.">

Content represents seconds.

john316

4:10 am on Sep 23, 2001 (gmt 0)

Sorry about the timeline suggestion, after looking at it, I doubt it would work. Time to go to sleep. :)

southernpaw

6:22 am on Sep 23, 2001 (gmt 0)

Ok Marshall(or anyone else), how do I do it with a picture I already have in my directory... such as jan2.jpg?

Marshall

7:37 am on Sep 23, 2001 (gmt 0)

southernpaw,

Basically, you have to create a whole other page - same content, but with the new background. If your main page is say www.home1.html with background 1.gif, then the "Refresh" page can be www.home2.html with background 2.gif. You can also use this technique to create a slide-show effect, but you have to account for the download time of the image. The page will change regardless if the image is fully downloaded. That's the drawback to this option. I also noticed you use a fixed background. Remember, that doesn't work in all browsers.

southernpaw

9:11 am on Sep 23, 2001 (gmt 0)

Thank you, Marshall!

southernpaw

9:23 am on Sep 23, 2001 (gmt 0)

Marshall (or anyone else), I have another question....

You said not all browsers show the background as "fixed", well my question is... On those browsers, will they see "bgproperties="fixed">" written on the page somewhere, or will the words not show up, and the background just scroll with it? Does that question make any sense? If not, let me know. Thanks!

Marshall

10:08 am on Sep 23, 2001 (gmt 0)

southernpaw,

Browsers ignore attributes which do not apply. When they're in a tag, such as <BODY>, they will not appear as text on the page. However, if you're using a script in the <HEAD>, or anywhere else on the page for that matter, if the browser doesn't support it, odds are the script will appear as text. You want to place  at the end. This will make it invisible to older browsers.

As for your background image, if the browser doesn't support the "fixed" attribute, the image will merely repeat.

southernpaw

5:23 pm on Sep 23, 2001 (gmt 0)

Just wanted to say thanks Marshall. I appreciate the help.

mivox

11:56 pm on Sep 23, 2001 (gmt 0)

Indeed Marshall, thanks! :)

(My home computer has been out of commission for the last two weeks... it's very nice to know the board members have been keeping an eye on the Graphics forum over the weekends...)

Marshall

12:02 am on Sep 24, 2001 (gmt 0)

mivox,

I'll send you a bill ;)

Beagle

3:41 am on Sep 24, 2001 (gmt 0)

hi southernpaw, you can do it also with directX transitions and filters. check this url [msdn.microsoft.com] to begin scratching the surface. like most techy things this is definately a can of worms but you more or less have directX at your fingertips if you go far enough. below are some image fades i experimented with a year or so ago. almost forgot ..!.. these probably don't work in NS :)

these all take two images and perform some transistions or fades etc.

webgoonz.com/trans/transition2.htm
' ' transition3.htm
' ' transition4.htm
' ' transition5.htm

ggrot

3:54 am on Sep 24, 2001 (gmt 0)

Try taking a peek at eastergardbuilders.com. It uses some flash to fade sketches of houses in and out. Its much smoother than any animated gif, and probably smaller too. The only trick then is learning a little flash.

legster

1:01 pm on Sep 24, 2001 (gmt 0)

I do faded images every day at work. I use Macromedia Fireworks. In the layers option you can select the image and make it from 0-100% transparent. Just put that into three or four different frames, and then have the transparency increase in each frame, and your all done.

If you don't have access to fireworks and the other methods mentioned don't work, then feel free to email me the image, and I will do it for ya. Only takes a couple minutes. :)

mivox

4:16 pm on Sep 24, 2001 (gmt 0)

I'll send you a bill

LOL... Hope you don't mind receiving payment in virtual currency. :)

Marshall

6:40 pm on Sep 24, 2001 (gmt 0)

mivox,

You're credit is good with me ;)