Adding animation as a background for a website

I created my website on photoshop and added the animation on photoshop. I saved it as JPEG and opened it on dreamweaver and when I previewed the webpage the animation was not working.
I want the background to animate from different pictures instead of staying with one picture.
How can I make my background change from different pictures?

@hyadav and krystyswi:
An animated .gif for a background image is an extremely bad plan. Animated .gifs that size would be enormous and slow down the viewer's browser pretty much no matter what.
@krystyswi
It sounds to me like you don't need an "animation" per se, but an image rotation script that you place behind your main content? Are you only planning to change from one image to the next, or do you have movement of multiple elements within the animation?
If you are just switching between images, jQuery Cycle 2 would be a good option: http://jquery.malsup.com/cycle2/

Similar Messages

How do I set my background for a website banner in these colours?

Hi guys, I am a complete beginner when it comes to Photoshop and I have just downloaded Adobe Photoshop CC 2014.
If you please refer to the picture I have uploaded, I want my website banner to be these shades of green. I do not want the white writing in it. So how would I create a website banner with the background as these shades of green without the writing?
PS I did not choose pick these colours, it was mum who want's the website created

You're looking for a Gradient
Photoshop Help | Gradients
Honestly, I would use a CSS Gradient instead of an actual image. Why? Because a CSS Gradient is Responsive (scalable) in % width layouts. And the code takes up very little bandwidth which is kinder & gentler to mobile data plans.
Your HTML & CSS code would look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your Site Name</title>
<style>
header {
    margin: 0;
    padding: 0;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: 32px;
    min-height: 150px;
    text-align: center;
    color: #FFF;
    text-shadow: 4px 3px 3px #666;
/**CSS Gradient**/
    background-color: #00a855;
    background: -moz-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #00a855), color- stop(100%, #bcd800));
    background: -webkit-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -o-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -ms-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: linear-gradient(135deg, #00a855 0%, #bcd800 100%);
</style>
</head>
<body>
<header>
<h1>Your Awesome Headline</h1>
</header>
</body>
</html>
Nancy O.

Background for all websites is white-not operating in correct mode.

''italic text''
The problem with the internet sites showing a white background seemed to start after I had updated Firefox according to a pop-up that said the update was available.
On my aol web site I can read my email, but cannot automatically send to a person on my roster. I have to type in the full address. When I go to google page to do a search, the background is white.

See:
* http://kb.mozillazine.org/Website_colors_are_wrong
* http://kb.mozillazine.org/Websites_look_wrong

Creating animations with transparent backgrounds?

I'm running into some problems when using After Effects to create animations with transparent backgrounds for Keynote...
I use animated gifs and short quicktime movies with uniform backgrounds as source files, use color keying to take out the backgrounds, preview them to see if they look OK, render the results as RGB+alpha, and... they don't show up as transparent in Keynote. They work in Powerpoint, however. I've tried outputting as .mov, as .gif, as premultiplied vs straight alpha... no joy. Can someone explain (or point me to an explanation) of how Keynote differs from other programs in its handling of transparency? What am I missing?

Using a TYPE_INT_ARGB BufferedImage worked beautifully. I had played around with Image for hours, but it never occurred to me that BufferedImage would be needed. :)
many, many thanks,
Steven

Background for site does not show up after uploading to webhost...

My background for my website does not show up on my webhost after uploading site with Dreamweaver.
Here is my site: http://legacyofys.comxa.com/
Here is the backgroud image: http://point-file-manager.000webhost.com/index.php?ftpserver=legacyofys.comxa.com&ftpserve rport=21&username=a2022293&language=en&skin=blue&ftpmode=automatic&passivemode=no&sslconne ct=no&viewmode=list&sort=&sortorder=&state=view&state2=image&directory=%2Fpublic_html%2Fim ages&entry=Background.png
I know the background image successfully uploaded to my webhost, because it shows up in my file manager. What is wrong here? How do I fix this?

So it was a path issue :-) Glad you sorted it .
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

How to create a add video for my website that loops continuously?

I am creating a website and would like to know if I can add a video as a background for my website and loops countinously?
Thanks for the reply.

This is help you ? http://dfcb.github.com/BigVideo.js/ I like to Know too but i dont nothing about code.

Rendering transparent background for website video

I have a comp for a website that I'm doing.
I have a transparent background and some fading in WHITE text with a light ray animated behind it.
I have followed instructions on how to render with the transparency intact (Quicktime, PNG, RGB+Alpha, Millions of Colors+). When I render it out and watch it in Quicktime, the light ray isn't correct and there's no transparency. Same thing with Final Cut Pro.
When I bring the footage back into AE, the transparency is there so I'm assuming that the transparency is there but QT & FC just don't play transparency files.
I need the transparency bc I want the text to reveal over a background picture I have in my webpage design.
Is there anyway to get this done right? I need the file to NOT be 300+ megabytes and when I drag the clip into COMPRESSOR to make it smaller, nothing is showing on the preview screen. I've been doing some research but haven't found anything to make it work correctly.
Can someone help me with this?
In the end, what I'm attempting to do is add the QT video into my iWeb page and have it play. I'm not a coder so I don't know how to make this happen any other way than making a QT movie and then adding it iWeb.
thanks in advance.

The only video format that supports transparency in a web browser is a flash player. That really doesn't fully support transparency either. The QuickTime player or any other video player will never ever support transparency in a web browser. Your project design is flawed from the outset. Another words you cannot do what you are trying to do using QuickTime. You will have to redesign for flash. If you redesign with flash, then you will not have a mobile compatible application.
I don't have much of an explanation of what you are trying to accomplish with your project so I can't give you more pointers than that. Point us to a website that has the features you are trying to implement on your webpage and maybe we can give you some ideas but After Effects is not where you should be looking.

How do I create an ANIMATED GIF for my Website Logo?

Hi,
I would like to make a turning logo for my website. The problem is that I don't know which software to use and how.
Is there an Adobe program which is easy for creating an Animated GIF or equivalent moving logo...
You can see my static logo here: Online Radio
Thank you,
Freeway

Hey Iggy,
These might help:
Muse
http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-muse-what-is-business-catalyst
http://tv.adobe.com/watch/introducing-business-catalyst/getting-started-with-business-cata lyst-and-muse-creating-and-publishing-sites
-Dave

How to play Animation with site loading in background to reveal website?

So I know there are pre loaders and you can make that with edge... But they are so small and just a little circle moving around or something... I more mean a full page pre-loader then I guess...
I have created an animation of a M with marquee lights going around and slowly zooming in... Then I have the M fade out and I have a black solid layer move up and another black solid layer move down to reveal the blank stage below...
What I want to happen is maybe with some java script but to have the solids move out of the way to reveal my site bellow... Anyone know how to accomplish this?
Thanks so much! I think being able to do things like this in native html and css and java will be huge for giving websites a "Font Door" or Opening Title like we have in movies... Thanks so much!

first I recommend that you use mouseenter and mouseleave instead.
second: if you have a symbol that has let's say one animation you can do
on mouse enter
sym.getSymbol('symbolname').play();
on mouseleave:
sym.getSymbol('symbolname').playReverse();
you may have to add
sym.getComposition().getStage().getSymbol('symbolname').play();
sym.getComposition().getStage().getSymbol('symbolname').playReverse();
or you can put the event in stage/compositionreday
sym.getSymbol('symbolname').mouseenter(function(){
sym.getSymbol('symbolname').play();
sym.getSymbol('symbolname').mouseleave(function(){
sym.getSymbol('symbolname').play();

I had photoshop elements 8 installed on my previous computer and it did not work properly when it came to sizing photos for a website I was adding to. I now have a new computer which runs windows 7. Is it worth installing it again on my new computer?

I had photoshop elements 8 installed on my previous computer and it did not work properly when it came to sizing photos for a website I was adding to. I now have a new computer which runs windows 7. Is it worth installing photoshop elements 8 again on my new computer or will it be a waste of time?

I have PSEv.8 on my computer running WINDOWS 7. It works perfectly..
Perhaps you need help with saving files for web use.. Will be pleased to assist you when you get everything set up.

Background for websites has disappeared.

I don't know what I did, but I think that I installed something that I shouldn't have.
Any way, the background for websites has disappeared. I see only Links listed on the left of my page. I'm using Firefox now, and it works fine.
I've uninstalled Safari, and reinstalled it. And I get the same problem.
What should I do to get Safari working again?

Hi,
Follow the instructions here in case you installed an unsupported Safari add on.
Safari: Unsupported third-party add-ons may cause Safari to unexpectedly quit or have performance issues
Carolyn

Can we get added plugins or animated logo intro's for Adobe Premiere Elements?

Can we get added plugins or animated logo intro's for Adobe Premiere Elements12 ? I know Adobe After Effects has them.

https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform for feature requests
Or Google to find out if 3rd party vendors offer what you want

Several browser background for the same website

I am currently designing a photo website which has several parts for the different "themes" and "countries" of my pictures. I want each of these themes to have a specific browser background, but it seems everytime I download one browser background it erases the other ones (show up as white). Is it possible to have several browser backgrounds for the same website ?

Dear Ramakanth,
In material master "Availability check" is already set to "02 - Individ.requirements"
It doesn't solve the problem. Aren't there any otherway to achieve this requirement??
Regards,
Madhushuika

Need Help making a navigation menu for a website

Alright so I've been having some problems getting this to work correctly. I am making a navigation menu for a website and I'm trying to get when I hover over the main header a drop down appears animated of course below it. I also want when you highlight a specific text line for it to highlight blue along with a rectangle behind it to change to a lighter shade of red.
Some of the problems I have been running into is play and stop commands on mouseover and them not stopping when they should and getting the text to change color.
Thanks for the help.
Here are some screen grabs of what I am doing
http://imgur.com/W2bZuF3
http://imgur.com/W2bZuF3
http://imgur.com/2GI3y71

Your page's code is still a bit of a wreck. Do you ever look at it?
<html>
<style type="text/css">#p7MBM_1 {
width: 951px;
You need a doctype first - I recommend HTML4.01 Transitional. Open this (and other pages) in DW and use FILE | Convert > HTML 4.01 Transitional, then save. But wait until you do the other changes recommended below before doing this.
Add a <head> tag below the <html> tag.
Add a <title> tag below the <head> tag.
Add this below the <title> tag - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Add </head> below this -
<style type="text/css">

</style>
You may want to change that font-family style to "Goudy Old Style, Geneva, Times, 'Times New Roman', serif", since Goudy is not web safe.
Move <body> below that </head> you just added.
That will clean your code up a bit. Let's look at the page again when you have done these.

Can anyone describe the workflow for this website nav?

Here's the url:
http://www.hypertemplates.com/templates/11195.html
I'm trying to create a similar nav system for my website, I'm
not concerned with the search features, but I just want the top nav
portion to have all the elements "fly into place" after loading,
then have the main pic have some animation that loops with animated
buttons such as the one in this template. I know this is a
subjective question, since there's probably many ways to accomplish
the same task, but I was curious to hear how different people would
go about building such a thing before I start. Also, does anyone
know where to get some simple, non-obnoxious click sounds for
buttons (kind of like the ones in this template, maybe even more
non-obtrusive)?
Thanks everyone, have an awesome new year!

Here's the basic gist of how I'd do it:
1) Create your nav, make sure each button is it's own symbol.
2) Select all the nav items, right click, distribute to
layers
3) Select all the keyframes for each nav item layer on frame
1, and move to some location where the nav will start to fly in
4) Still dealing with the nav item layers, select a column of
frames say 10-20 frames beyond where the keyframes are, press F6 to
add keyframes
5) You now have two keyframes, start and end point. Scrub the
timeline to where the first keyframe is, and
a) Move them to the right, say 50px
b) In Properties panel, change the Color mode to Alpha, and
set to 0 or a small value, like 10
6) Now scrub the timeline to where the end keyframes are,
select all the nav items on stage, and make sure it appears as you
will want it to(since you already added the keyframe, it should be
100 alpha and in the right place)
7) Select a column of frames between the start and end
keyframes for the nav item layers
8) In the properties panel, for Tween select Motion
9) Add some ease
10) At this point all nav items zoom in at once. Now simply
go through the timeline and take each tween and move it to the
right a few frames, so one will come in after the other
For the looping animation picture, put some animation inside
of a MovieClip symbol, it will loop when on the main timeline. Now
you can just fade in/animate in the MovieClip initially.

Adding animation as a background for a website

Similar Messages

Maybe you are looking for