Animated or Static Background Images
Mar 04, 2016
I followed David Anderson's video step by step to apply an animated gif file (colorwave.gif). I used Sublime Text to code (David used DW). I did it a few times but failed to get the animated background to appear.
There are the steps I took:
- Created a .story file
- Published it
- Stored the colorwave.gif file in the Published folder
- Opened Sublime Text to add <body background="colorwave.gif"> above the line </head>
- Saved it.
- Copied the files in the Published folder to google drive as usual to view the published file - also tried to drag the zipped file to Tempshare
Did I miss a step somewhere? David? Tracy?
30 Replies
Hey Daniela! I'll reach out to our Community Team and see if they can provide some further insight on this one...such a cool idea.
Here is the animated gif I used.
Hm, this works for me. I used the same gif you provided.
I also uploaded a quick test to a server, see here.
LOL! Ok, but what could I have done different. I can keep trying. Thanks Michael. So helpful, as usual!
So you are saying that it should work as published using Google Drive or Tempshare? Let me see if I can take a snapshot of the coding in Sublime Text and I will post here? or attach.
Michael, can you pls take a look at the attachment to make sure the coding is correct.
Sorry, didn't mean to blind you with this gif!
I don't see why it wouldn't work on GoogleDrive or TempShare, I simply uploaded the test file to my server.
Here is the published folder with the gif added.
Here's the .story file too. I tested the published file in Tempshare. Did not work.
Also wouldn't mind knowing how to make it so it does not tile it - one whole image.
Oh wait. I see something off...should be colorwave2
...will try again.
Doesn't like me....
Got it to work in Google Drive. Not sure about Tempshare since it need the zip folder and not sure if the gif file is in there. Will look at that but for now, YAY!
Here is your file published to my server and with the body style change to not tile the background image. To not stile, you need to add this body style and not use the original line:
body { background: url('colorwave2.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here it is:
https://googledrive.com/host/0B4cWLl4F_TnfRzMyNjZvd2NxelE
Link doesn't work
Darn "Public" sharing step. Always forget it. Try now?
Just saw this. I will try this. Thanks.
Why do some of my comments appear grayed out?
I will try this.
Boy this is really frustrating. I also tried with and without < > around the new coding you gave me to prevent tiling. It isn't working again. I will have to look at it again later. I'm done with this for now and it's dinner time. Family waiting.
The link works, it jusy doesn't show the background.
See attached my published and zipped test file.
Hi Daniela
if you reply too quick the system thinks you might be spam and greys it out - the moderators will go through and release you.
Happens to me all the time ;-)
It did but I changed it to the new coding you gave me. Am I supposed to put < > around it.?
This discussion is closed. You can start a new discussion or contact Articulate Support.