homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Fading background
Can it be done?

 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!



 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.


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

How do I do a timeline using layers?


 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.


 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. :)


 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?


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


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.


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

Thank you, Marshall!


 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!


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


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 beginning of each script and --> 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.


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

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


 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...)


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


I'll send you a bill ;)


 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.

' ' transition3.htm
' ' transition4.htm
' ' transition5.htm


 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.


 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. :)


 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. :)


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


You're credit is good with me ;)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved